vue中的封裝常用工具類
vue封裝常用工具類
公司要新開一個項目,我來分享一下簡單封裝常用的工具類
首先在util目錄下創(chuàng)建一個Common.js文件
然后開始封裝
1.驗證手機(jī)號是否合格 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.判斷數(shù)據(jù)類型 * @param {any} val - 基本類型數(shù)據(jù)或者引用類型數(shù)據(jù) * @return {string} - 可能返回的結(jié)果有,均為小寫字符串 * number、boolean、string、null、undefined、array、object、function等 */ export function getType(val) { //判斷數(shù)據(jù)是 null 和 undefined 的情況 if (val == null) { return val + ""; } return typeof (val) === "object" ? Object.prototype.toString.call(val).slice(8, -1).toLowerCase() : typeof (val); } 5.驗證是否為數(shù)字 export function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } 6.是否為數(shù)組 export function isArray(obj) { return Object.prototype.toString.call(obj) === '[object Array]'; } 7.是否為空數(shù)組 export function isArrayEmpty(val) { if (val && val instanceof Array && val.length > 0) { return false; } else { return true; } } 8.獲取url參數(shù)字符串 沒有返回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.函數(shù)防抖 /** * @desc 函數(shù)防抖,用于將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行 * @param {function} func - 需要使用函數(shù)防抖的被執(zhí)行的函數(shù)。必傳 * @param {Number} wait - 多少毫秒之內(nèi)觸發(fā),只執(zhí)行第一次,默認(rèn)1000ms。可以不傳 */ export function debounce(fn, delay) { delay = delay || 1000; //默認(rèn)1s后執(zhí)行 let timer = null; return function () { let context = this; let arg = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(context, arg); }, delay); }; } 10.函數(shù)節(jié)流 /** * 節(jié)流函數(shù), 用于將多次執(zhí)行變?yōu)槊扛粢欢螘r間執(zhí)行 * @param fn 事件觸發(fā)的操作 * @param delay 間隔多少毫秒需要觸發(fā)一次事件 */ 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.將字符串時間轉(zhuǎn)換為時間戳 /** * 將字符串時間轉(zhuǎn)換為時間戳 * @param {string} date */ export function getDateTime(date) { let timestamp = ''; if (date) { date = date.substring(0, 19); date = date.replace(/-/g, '/'); //必須把日期'-'轉(zhuǎn)為'/' 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.創(chuàng)建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);
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-echarts高度縮小時autoresize失效的原因和解決辦法
Vue-Echarts是一個基于ECharts封裝的輕量級、易用的圖表組件庫,它允許你在Vue.js應(yīng)用中方便地集成ECharts,這是一個強(qiáng)大而直觀的數(shù)據(jù)可視化庫,本文給大家介紹了vue-echarts高度縮小時autoresize失效的原因和解決辦法,需要的朋友可以參考下2024-12-12Vue?項目中選擇?TSX?而非傳統(tǒng)?.vue?文件的原因分析
文章探討了Vue項目中使用TSX(TypeScript?JSX)的背景、優(yōu)勢和局限性,TSX結(jié)合了TypeScript和JSX,增強(qiáng)了類型安全和代碼組織性,但也增加了學(xué)習(xí)曲線和可讀性問題,對于復(fù)雜應(yīng)用,TSX提供了更大的靈活性和類型支持,逐漸成為一些開發(fā)者的選擇2024-11-11vue3 vue-draggable-next如何實現(xiàn)拖拽穿梭框效果
這篇文章主要介紹了vue3 vue-draggable-next如何實現(xiàn)拖拽穿梭框效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06