vue中的封装常用工具类

 更新时间:2023年05月24日 09:16:00   作者:vue呀vue  
这篇文章主要介绍了vue中的封装常用工具类,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue封装常用工具类

公司要新开一个项目,我来分享一下简单封装常用的工具类

首先在util目录下创建一个Common.js文件

然后开始封装

1.验证手机号是否合格
   true  合格
export function isPhone(phoneStr) {
    let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    if (!myreg.test(phoneStr)) {
        return false;
    } else {
        return true;
    }
}
2.验证身份证号是否合格
   true 说明合格
export function isIdCard(idCardStr) {
    let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
    if (idcardReg.test(idCardStr)) {
        return true;
    } else {
        return false;
    }
}
3.验证字符串是否为空
   ture 说明为空  false 说明不为空
   export function isEmptyString(string) {
    if (
        string == undefined ||
        typeof string == 'undefined' ||
        !string ||
        string == null ||
        string == '' ||
        /^\s+$/gi.test(string)
    ) {
        return true;
    } else {
        return false;
    }
}
4.判断数据类型
* @param {any} val - 基本类型数据或者引用类型数据
 * @return {string} - 可能返回的结果有,均为小写字符串
 * number、boolean、string、null、undefined、array、object、function等
 */
export function getType(val) {
    //判断数据是 null 和 undefined 的情况
    if (val == null) {
        return val + "";
    }
    return typeof (val) === "object" ?
        Object.prototype.toString.call(val).slice(8, -1).toLowerCase() :
        typeof (val);
}
5.验证是否为数字
export function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
6.是否为数组
export function isArray(obj) {
    return Object.prototype.toString.call(obj) === '[object Array]';
}
7.是否为空数组
export function isArrayEmpty(val) {
    if (val && val instanceof Array && val.length > 0) {
        return false;
    } else {
        return true;
    }
}
8.获取url参数字符串
没有返回null
export function getQueryString(name) {
    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    let r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
9.函数防抖
/**
 * @desc  函数防抖,用于将多次执行变为最后一次执行
 * @param {function} func - 需要使用函数防抖的被执行的函数。必传
 * @param {Number} wait - 多少毫秒之内触发,只执行第一次,默认1000ms。可以不传
 */
export function debounce(fn, delay) {
    delay = delay || 1000; //默认1s后执行
    let timer = null;
    return function () {
        let context = this;
        let arg = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(context, arg);
        }, delay);
    };
}
10.函数节流
/**
 * 节流函数, 用于将多次执行变为每隔一段时间执行
 * @param fn 事件触发的操作
 * @param delay 间隔多少毫秒需要触发一次事件
 */
export function throttle2(fn, delay) {
    let timer = null;
    return function () {
        let context = this;
        let args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                fn.apply(context, args);
                clearTimeout(timer);
            }, delay);
        }
    };
}
11.将字符串时间转换为时间戳
/**
 * 将字符串时间转换为时间戳
 * @param {string} date
 */
export function getDateTime(date) {
    let timestamp = '';
    if (date) {
        date = date.substring(0, 19);
        date = date.replace(/-/g, '/'); //必须把日期'-'转为'/'
        timestamp = new Date(date).getTime();
    }
    return timestamp;
}
12.获取年-月-日
/**
 * 获取年-月-日
 * @data {Any} 时间戳
 */
export function getDates(data) {
    let timeObj = {};
    data = new Date(data);
    let y = data.getFullYear();
    let m =
        data.getMonth() + 1 < 10
            ? '0' + (data.getMonth() + 1)
            : data.getMonth() + 1;
    let d = data.getDate() < 10 ? '0' + data.getDate() : data.getDate();
    let w = data.getDay();
    switch (w) {
        case 1:
            w = '星期一';
            break;
        case 2:
            w = '星期二';
            break;
        case 3:
            w = '星期三';
            break;
        case 4:
            w = '星期四';
            break;
        case 5:
            w = '星期五';
            break;
        case 6:
            w = '星期六';
            break;
        case 7:
            w = '星期日';
            break;
    }
    let h = data.getHours() < 10 ? '0' + data.getHours() : data.getHours();
    let mi = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes();
    let s = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds();
    timeObj = {
        year: y + '',
        month: m + '',
        day: d + '',
        week: w + '',
        hour: h + '',
        minute: mi + '',
        second: s + ''
    };
    return timeObj;
}

然后就是引入问题,如果你不嫌麻烦,你就哪里用到了,你那里引入这个js

也可以全局引入,接下来我说说全局引入

在main.js中直接引入。

然后就这么用,没了。

vue封装全局工具类并使用

1.创建js工具类文件

export default {
    getModelShowPic: function (menyType) {
      //test
    }
}

2.在min.ts中引用

import Common from '@/utils/Common.js
Vue.prototype.utils=Common

注意,如果提示错误utils/Common.js’ implicitly has an ‘any’ type.,在tsconfig.json中添加:

3.使用

this.utils.getModelShowPic(modelType);

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue-cli 脚手架基于Nightwatch的端到端测试环境的过程

    vue-cli 脚手架基于Nightwatch的端到端测试环境的过程

    这篇文章主要介绍了vue-cli 脚手架基于Nightwatch的端到端测试环境的过程,需要的朋友可以参考下
    2018-09-09
  • Vue3.2+Ts组件之间通信的实现

    Vue3.2+Ts组件之间通信的实现

    本文主要介绍了Vue3.2+Ts组件之间通信的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Vue 通过自定义指令回顾v-内置指令(小结)

    Vue 通过自定义指令回顾v-内置指令(小结)

    这篇文章主要介绍了Vue 通过自定义指令回顾v-内置指令(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue项目配置同一局域网可使用ip访问的操作

    vue项目配置同一局域网可使用ip访问的操作

    这篇文章主要介绍了vue项目配置同一局域网可使用ip访问的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 移动端底部导航固定配合vue-router实现组件切换功能

    移动端底部导航固定配合vue-router实现组件切换功能

    经常遇到这样的需求,移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件。这篇文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,需要的朋友可以参考下
    2019-06-06
  • vue实现图片上传功能

    vue实现图片上传功能

    这篇文章主要为大家详细介绍了vue实现图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • vue实现下拉框的多选功能(附后端处理参数)

    vue实现下拉框的多选功能(附后端处理参数)

    本文介绍了如何使用Vue实现下拉框的多选功能,实现了在选择框中选择多个选项的功能,文章详细介绍了实现步骤和示例代码,对于想要了解如何使用Vue实现下拉框多选功能的读者具有一定的参考价值
    2023-08-08
  • vue跳转页面携带参数并且立即执行方法

    vue跳转页面携带参数并且立即执行方法

    这篇文章主要介绍了vue跳转页面携带参数并且立即执行方法,首先定义跳转函数,结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-10-10
  • vite2打包的时候vendor-xxx.js文件过大的解决方法

    vite2打包的时候vendor-xxx.js文件过大的解决方法

    vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,本文主要介绍了vite2打包的时候vendor-xxx.js文件过大的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue中点击url下载文件的案例详解

    Vue中点击url下载文件的案例详解

    这篇文章主要介绍了Vue中点击url下载文件案例详解,此文需要注意若是文件的url存在跨域的情况,则可能会下载失败,因为fetch请求连接后,由于跨域,拿不到资源,也就无法执行后续的操作,此时是失败的,详细内容跟随小编一起看看吧
    2022-04-04

最新评论