vue项目常用方法封装,持续更新中。。。
vue项目中可以直接使用
1、常用工具类untils.js中
/*
* 验证手机号是否合格
* 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;
}
}
/*
* 验证身份证号是否合格
* 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
}
}
/**
* 验证车牌号是否合格
* true--说明合格
*/
export function isVehicleNumber(vehicleNumber) {
let xreg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
let creg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
if(vehicleNumber.length == 7){
return creg.test(vehicleNumber);
} else if(vehicleNumber.length == 8){
return xreg.test(vehicleNumber);
} else{
return false;
}
}
/*
* 验证字符串是否为空(也不能为纯空格)
* true--说明为空, false--说明不为空
*/
export function isEmptyString(string) {
if (string == undefined
|| typeof string == "undefined"
|| !string
|| string == null
|| string == ''
|| /^\s+$/gi.test(string) ) {
return true;
}else{
return false;
}
}
/*
* 生日转为年龄(精确到月份)
*/
export function birsdayToAge(birsday) {
let aDate = new Date();
let thisYear = aDate.getFullYear();
let bDate = new Date(birsday);
let brith = bDate.getFullYear();
let age = thisYear - brith;
if(aDate.getMonth()==bDate.getMonth()){
if(aDate.getDate()<bDate.getDate()){
age = age -1;
}
}else{
if(aDate.getMonth()<bDate.getMonth()){
age = age -1;
}
}
return age
}
/*
* 验证是否为数字
*/
export function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
/*
* 是否为数组
*/
export function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]';
}
/*
* 是否空数组
*/
export function isArrayEmpty(val) {
if(val && val instanceof Array && val.length>0){
return false;
}else{
return true;
}
}
/*
* 获取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
}
/*
* 递归深拷贝
*/
export function deepCopy(obj) {
let result = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
if(typeof obj[key] === 'object' && obj[key] !== null) {
result[key] = deepCopy(obj[key]);
} else {
result[key] = obj[key];
}
}
}
return result;
}
/**
* 去除参数空数据(用于向后台传递参数的时候)
* @param {Object} obj [参数对象]
*/
export function filterEmptyData(obj){
for (let prop in obj) {
obj[prop] === '' ? delete obj[prop] : obj[prop]
}
return obj;
}
/**
* @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)
}
}
/**
* 节流函数, 用于将多次执行变为每隔一段时间执行
* @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)
}
}
}
2、本地存储工具类storageUntils.js
- 结合vuex使用
class Storage {
constructor(keyValue){
this.key = keyValue;
}
get(){
try{
if (!this.key) return '';
return JSON.parse(window.localStorage.getItem(this.key));
}catch(err){
return '';
}
}
set(data){
window.localStorage.setItem(this.key,JSON.stringify(data));
}
del(){
window.localStorage.removeItem(this.key);
}
}
export const userInfo = new Storage('userInfo'); //登录用户信息
export const token = new Storage('token'); //登录token
项目中常用到的一些工具方法,持续更新中。。。
vue项目常用方法封装,持续更新中。。。的更多相关文章
- 【前端面试】Vue面试题总结(持续更新中)
Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...
- 转发 ----> 2018年阿里巴巴重要开源项目汇总(持续更新中)
转发自segmentfault https://segmentfault.com/a/1190000017346799 前端 1.数据驱动的高交互可视化图形语法 AntV - G2 G2 是一套基于 ...
- Vue 项目优化,持续更新...
一.减少打包的体积 通过vue-cli 初始化项目后,使用 npm run build 生成的JS文件往往会很大,加载时间过长导致页面长时间白屏,所以我们尽可能的使用一下方法来减少打包体积. 1.1 ...
- 107个JS常用方法(持续更新中)
1.输出语句:document.write(""); 2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个 ...
- js中的各种常用方法(持续更新中。。。)
我看到常用的就写上去,如果你们有,可以在评论上发表,我再把它补充到我的随笔中 some() var ages = [3, 10, 18, 20]; function checkAdult(age) { ...
- 【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)
Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包 ...
- 个人开源项目testall 持续更新中···
项目在GitHub上:https://github.com/x113773/testall ,喜欢的给个星星呀,亲~ 打算把用到过的和学习过的,所有前后端技术都集成到这个项目里,并在issues里配以 ...
- Android 自己收集的开源项目集合(持续更新 2018.2.5)
2017.12.21 1.仿QQ说说发图片选择框架 https://github.com/yaozs/ImageShowPicker 2.炫酷开屏动画框架 https://github.com/Jos ...
- 前端深入之js篇丨Array数组操作从入门到成神Up Up Up,持续更新中
写在前面 随着前端深入的不断学习,发现数组这个数据结构在前端中有着相当大的存在感,由于我初学前端的时候并没有系统性的学习数组,所以我将通过这篇文章同你一起学习数组,希望我们能一起进步,学会熟练操作数组 ...
随机推荐
- 国产安全自主可控IT智能运维管理解决方案
新一轮科技革命和产业变革席卷全球,大数据.云计算.物联网.人工智能.区块链等新技术不断涌现,数字经济正深刻地改变着人类的生产和生活方式,作为经济增长新动能的作用日益凸显.伴随增长的,还有网络中不断涌现 ...
- android应用开发错误:Your project contains error(s),please fix them before running your
重新打开ECLIPSE运行android项目,或者一段时间为运行ECLIPSE,打开后,发现新建项目都有红叉,以前的项目重新编译也有这问题,上网搜索按下面操作解决了问题 工程上有红叉,不知道少了什么, ...
- C#的多线程简洁笔记
New Thread(()=>{}).Start(); //匿名线程 Thread Ntd = new Thread(T1); Ntd.IsBackground = true; //后台线程 N ...
- scrapy框架中多个spider,tiems,pipelines的使用及运行方法
用scrapy只创建一个项目,创建多个spider,每个spider指定items,pipelines.启动爬虫时只写一个启动脚本就可以全部同时启动. 本文代码已上传至github,链接在文未. 一, ...
- Android EditText不可编辑单行显示能滑动查看内容
遇到问题 有时为了节约界面控件,可以界面的美观,我们会使用单行显示 singleLine,如果使用 Enable = false 输入框文字呈现灰色,并且也无法操作. 想要实现的效果是,单行显示,不能 ...
- windows7安装.NET Framework 4.5.2 框架(迅雷下载链接)
.NET Framework 4.5.2 框架 数据库安装windows7安装mysql时需要 迅雷下载链接: https://download.microsoft.com/download/E/2/ ...
- STM32之RGB灯仿真
实验目的 点灯是练习GPIO输出的最佳实验.由于疫情期间没法返校,手头上没有现成的实验板,于是借助Proteus进行仿真.本实验点的不是普通的灯,而是RGB混色灯,实现多种颜色的显示.后期还可以加上P ...
- udp socket 10054
udp socket 10054 在接收端没有启动的情况下 1.直接ReceiveFrom没问题. 2.如果先SendTo再ReceiveFrom,SendTo可以正常过,但是RecieveFrom会 ...
- shell 一键配置单实例oracle基础环境变量(linux7)
#!/bin/bash echo "修改主机名" hostnamectl set-hostname wangxfa hostname sleep 1 echo "查看并关 ...
- Mac 下如何快速重启 Dock 栏?
两种方法. 如果Dock栏出现了问题或是没有反应,请打开Launchpad并按下Command+D键. 这样就可以关闭Dock栏并重启它,效果和经常用到的killall Dock命令相同.