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路由导航守卫和请求拦截以及基于node的token认证的方法
这篇文章主要介绍了vue路由导航守卫和请求拦截以及基于node的token认证的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-04-04vue使用element-ui的el-date-picker设置样式无效的解决
本文主要介绍了vue使用element-ui的el-date-picker设置样式无效的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-03-03
最新评论