vue
vue3+vite自动化注册全局组件
vue3加载远程组件
Vue Vine 编写 Vue 的另一种风格
Vueuse 实现数字滚动 Count-to
学会这几个常用功能,给你的 vue3 项目加点餐!
为什么有些 Vue3 项目已经开始弃用 Pinia 了?
Vue3 的 5 个组合式 API 方法
Vue3+TS+canvas 项目预览图片时,添加水印,浏览器禁止右键功能、前端禁止直接获取图片地址
Vue3.x 生态最能打的组合!
vue2封装常用工具类
使用 v-once 和 v-memo 进行 Vue 渲染优化
基于 Vue + Element plus + Node 实现大文件分片上传,断点续传和秒传的功能!
Vue中的$attrs和$listeners对象有什么作用?
本文档使用 MrDoc 发布
-
+
首页
vue2封装常用工具类
新建工具文件`tools.js` ~~~js export default { /** 校验 **/ // 1:手机号校验 isPhone(num) { return /^1[2,3,4,5,7,8]\d{9}$/.test(num) }, // 2:中英文姓名校验 isName(name) { return /[a-zA-Z\u4E00-\u9FA5]+$/.test(name) }, // 3:身份证号校验 *15/18位* isIdcard(idcard) { return /^\d{15}|\d{}18$/.test(idcard) }, // 4:银行卡校验 isBank(bank) { return /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/.test(bank) }, // 5:邮箱校验 isEmail(email) { return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(email); }, // 6:QQ号校验 isQQ(qq) { return /^[1-9][0-9]{4,9}$/.test(qq); }, // 7:邮政编码校验 isPostal(post) { return /[1-9]\d{5}(?!\d)/.test(post); }, // 8:英文校验 isEn(english) { return /^[a-zA-Z]+$/.test(english); }, // 9:中文校验 isCh(chinese) { return /^[\u4E00-\u9FA5]+$/.test(chinese); }, // 10:HTML校验 isHtml(html) { return /<("[^"]*"|'[^']*'|[^'">])*>/.test(html); }, // 11:车牌号校验 isCarNum(carNum) { let patrn = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})$/ let patrn2 = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))$/ if (!patrn.test(carNum) && !patrn2.test(carNum)) { return false } else { return true } }, // 12:校验车架号 isVehicle(vehicle) { let patrn = /^[A-HJ-NP-Za-hj-np-z0-9]+$/ if (!patrn.test(vehicle) || vehicle === '') { return false } else { return true } }, // 13:密码校验 isPassword(pwd) { return /^[a-zA-Z]\w{5,17}$/.test(pwd) }, /** 判断 **/ // 1:判断是否为PC端 isPC() { let userAgentInfo = navigator.userAgent let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'] let flag = true for (let v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false break } } return flag }, // 2:判断当前设备{ios/android/web} isDevice() { let ua = navigator.userAgent.toLowerCase() if (ua.match(/iPhone\sOS/i) === 'iphone os' || ua.match(/iPad/i) === 'ipad') { return 'iOS' } if (ua.match(/Android/i) === 'android') { return 'Android' } return 'Web' }, // 3:判断是否为微信 isWx() { let ua = window.navigator.userAgent.toLowerCase() if (ua.match(/MicroMessenger/i) === 'micromessenger') { return true } return false }, // 4:判断两个数组是否相等 arrayEqual(arr1, arr2) { if (arr1 === arr2) return true; if (arr1.length != arr2.length) return false; for (let i = 0; i < arr1.length; ++i) { if (arr1[i] !== arr2[i]) return false; } return true; }, // 5:判断图片是否加载完成 imgLoadAll(arr, callback) { let arrImg = [] for (let i = 0; i < arr.length; i++) { let img = new Image() img.src = arr[i] img.onload = function () { arrImg.push(this) if (arrImg.length == arr.length) { callback && callback() } } } }, //6:判断音频是否加载完成 loadAudio(src, callback) { let audio = new Audio(src) audio.onloadedmetadata = callback audio.src = src }, /** 获取 **/ // 1:获取url的参数 urlParams(urlLocation) { /* urlLocation参数非必传,不传获取当前地址 */ const fullUrl = urlLocation ? urlLocation : location.href; const url = fullUrl.substr(fullUrl.indexOf("?")); //获取url中"?"符后的字串 const theRequest = new Object(); if (url.indexOf("?") != -1) { const str = url.substr(1); const strs = str.split("&"); for (let i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); } } return theRequest; }, // 2:获取当前日期星期 getDate() { let date = new Date(); let seperator1 = "-"; let year = date.getFullYear(); let month = date.getMonth() + 1; let strDate = date.getDate(); let days = date.getDay(); switch (days) { case 1: days = '星期一'; break; case 2: days = '星期二'; break; case 3: days = '星期三'; break; case 4: days = '星期四'; break; case 5: days = '星期五'; break; case 6: days = '星期六'; break; case 0: days = '星期日'; break; } if (month >= 1 && month <= 9) { month = "0" + month; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } let intraday = year + seperator1 + month + seperator1 + strDate + days; return intraday }, // 3:获取滚动条的滚动距离 getViewportOffset() { if (window.innerWidth) { return { w: window.innerWidth, h: window.innerHeight } } else { // ie8及其以下 if (document.compatMode === "BackCompat") { // 怪异模式 return { w: document.body.clientWidth, h: document.body.clientHeight } } else { // 标准模式 return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight } } } }, // 4:首尾去空格 trim(str) { return str.replace(/(^\s*)|(\s*$)/g, '') }, /** 转换 **/ // 1:将某个元素置顶 toFirst(fieldData, index) { if (index != 0) { fieldData.unshift(fieldData.splice(index, 1)[0]); } return fieldData }, // 2:将某个元素移至末尾 toEnd(fieldData, index) { fieldData.push(fieldData[index]); fieldData.splice(index, 1); return fieldData; }, // 3:将指定元素上移一位 upGo(fieldData, index) { if (index != 0) { fieldData[index] = fieldData.splice(index - 1, 1, fieldData[index])[0]; } else { fieldData.push(fieldData.shift()); } return fieldData }, // 4:将指定元素下移一位 downGo(fieldData, index) { if (index != fieldData.length - 1) { fieldData[index] = fieldData.splice(index + 1, 1, fieldData[index])[0]; } else { fieldData.unshift(fieldData.splice(index, 1)[0]); } return fieldData }, /** 生成 **/ // 1:生成随机数{min~max:随机数范围} random(min, max) { if (arguments.length === 2) { return Math.floor(min + Math.random() * ((max + 1) - min)) } else { return null } }, // 2:数组删除指定元素 removeArr(arr, ele) { let index = arr.indexOf(ele); if (index > -1) { arr.splice(index, 1); } return arr; }, // 3:数组并集 unionArr(arr1, arr2) { return [...new Set([...arr1, ...arr2])]; }, // 4:数组交集 intersectArr(arr1, arr2) { return [...new Set([...arr1].filter(x => arr2.includes(x)))]; }, // 5:数组差集 differenceArr(arr1, arr2) { return [...new Set([...arr1].filter(x => !arr2.includes(x)))]; }, // 6:数组去重 deduplicationArr(arr) { return [...new Set([...arr])] }, // 7:数组最大值 maxArr(arr) { return Math.max.apply(null, arr); }, // 8:数组最小值 minArr(arr) { return Math.min.apply(null, arr); }, } ~~~
admin
2024年7月2日 11:51
转发文档
收藏文档
上一篇
下一篇
手机扫码
复制链接
手机扫一扫转发分享
复制链接
Markdown文件
分享
链接
类型
密码
更新密码