vue中的封裝常用工具類
vue封裝常用工具類
公司要新開一個(gè)項(xiàng)目,我來(lái)分享一下簡(jiǎn)單封裝常用的工具類
首先在util目錄下創(chuàng)建一個(gè)Common.js文件

然后開始封裝
1.驗(yàn)證手機(jī)號(hào)是否合格
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.驗(yàn)證身份證號(hào)是否合格
true 說(shuō)明合格
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.驗(yàn)證字符串是否為空
ture 說(shuō)明為空 false 說(shuō)明不為空
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.驗(yàn)證是否為數(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ù)字符串
沒(méi)有返回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(shí)間執(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.將字符串時(shí)間轉(zhuǎn)換為時(shí)間戳
/**
* 將字符串時(shí)間轉(zhuǎn)換為時(shí)間戳
* @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} 時(shí)間戳
*/
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;
}然后就是引入問(wèn)題,如果你不嫌麻煩,你就哪里用到了,你那里引入這個(gè)js
也可以全局引入,接下來(lái)我說(shuō)說(shuō)全局引入

在main.js中直接引入。

然后就這么用,沒(méi)了。
vue封裝全局工具類并使用
1.創(chuàng)建js工具類文件

export default {
getModelShowPic: function (menyType) {
//test
}
}2.在min.ts中引用
import Common from '@/utils/Common.js Vue.prototype.utils=Common
注意,如果提示錯(cuò)誤utils/Common.js’ implicitly has an ‘any’ type.,在tsconfig.json中添加:

3.使用
this.utils.getModelShowPic(modelType);
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli 腳手架基于Nightwatch的端到端測(cè)試環(huán)境的過(guò)程
這篇文章主要介紹了vue-cli 腳手架基于Nightwatch的端到端測(cè)試環(huán)境的過(guò)程,需要的朋友可以參考下2018-09-09
Vue 通過(guò)自定義指令回顧v-內(nèi)置指令(小結(jié))
這篇文章主要介紹了Vue 通過(guò)自定義指令回顧v-內(nèi)置指令(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問(wèn)的操作
這篇文章主要介紹了vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問(wèn)的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
移動(dòng)端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能
經(jīng)常遇到這樣的需求,移動(dòng)端中的導(dǎo)航并不是在頂部也不是在底部,而是在最底部且是固定的,當(dāng)我們點(diǎn)擊該導(dǎo)航項(xiàng)時(shí)會(huì)切換到對(duì)應(yīng)的組件。這篇文章主要介紹了移動(dòng)端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能,需要的朋友可以參考下2019-06-06
vue實(shí)現(xiàn)下拉框的多選功能(附后端處理參數(shù))
本文介紹了如何使用Vue實(shí)現(xiàn)下拉框的多選功能,實(shí)現(xiàn)了在選擇框中選擇多個(gè)選項(xiàng)的功能,文章詳細(xì)介紹了實(shí)現(xiàn)步驟和示例代碼,對(duì)于想要了解如何使用Vue實(shí)現(xiàn)下拉框多選功能的讀者具有一定的參考價(jià)值2023-08-08
vue跳轉(zhuǎn)頁(yè)面攜帶參數(shù)并且立即執(zhí)行方法
這篇文章主要介紹了vue跳轉(zhuǎn)頁(yè)面攜帶參數(shù)并且立即執(zhí)行方法,首先定義跳轉(zhuǎn)函數(shù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
vite2打包的時(shí)候vendor-xxx.js文件過(guò)大的解決方法
vite2是一個(gè)非常好用的工具,只是隨著代碼的增多,打包的時(shí)候?vendor-xxxxxx.js?文件也越來(lái)越大,本文主要介紹了vite2打包的時(shí)候vendor-xxx.js文件過(guò)大的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03

