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,持续更新中
写在前面 随着前端深入的不断学习,发现数组这个数据结构在前端中有着相当大的存在感,由于我初学前端的时候并没有系统性的学习数组,所以我将通过这篇文章同你一起学习数组,希望我们能一起进步,学会熟练操作数组 ...
随机推荐
- HDU 5234 背包。
J - 10 Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Statu ...
- 数据分析之pandas库--series对象
1.Series属性及方法 Series是Pandas中最基本的对象,Series类似一种一维数组. 1.生成对象.创建索引并赋值. s1=pd.Series() 2.查看索引和值. s1=Serie ...
- Kail Linux下载与安装
官方镜像: https://www.kali.org/downloads/ 官方虚拟机镜像: https://www.offensive-security.com/kali-linux-vm-vmwa ...
- git的使用方法大全
换了一个新的工作环境,由于以前都是使用SVN管理代码,现在要换成git,但我对git了解不多,只好下功夫咯!脑子不灵活,命令语句容易忘,所以做个笔记记录下~~~1.安装git到Git官网下载合适自己电 ...
- laravel web server设置远程访问及原理
laravel中可以用命令行php artisan serve 启动web server,并通过localhost:8000访问项目. 但是因为开发环境为虚拟机部署项目,然后通过端口访问,所以开启服务 ...
- 通配符与标签!important的背景展示,也是让我怀疑人生了
是谁在耳边对我说!important提升权重优先级,只为这一句,我用了3600s研究通配符与标签!important的背景展示,也是让我怀疑人生了!选择器权值:标签选择器1,类选择器和伪类选择器:10 ...
- 「Flink」事件时间与水印
我们先来以滚动时间窗口为例,来看一下窗口的几个时间参数与Flink流处理系统时间特性的关系. 获取窗口开始时间Flink源代码 获取窗口的开始时间为以下代码: org.apache.flink.str ...
- html文件如何下载文件
HTML中下载文件两种方法:a标签下载:js下载; <!-- 网页地址和图片地址同源的情况下这样是可以的,不同源则是直接打开这个地址 --> <!-- 方法一:同源情况下载 --&g ...
- 反射机制(reflection)
一.反射: 1.反射指可以在运行时加载.探知.使用编译期间完全未知的类. 2.程序在运行状态中,可以动态加载一个只有名称的类,对于任意一个已加载的类,都能够知道这个类的所有属性和方法: 对于任意一个对 ...
- nCompass-产品配置基础
nCompass-产品配置基础 设备上架后,浏览器登陆设备的管理IP,输入用户名和密码, 登入进入视图展示页面 1. 添加许可 新设备上架之后,要添加许可方能使用. 步骤: 系统设置 --- 许可-- ...