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,持续更新中
写在前面 随着前端深入的不断学习,发现数组这个数据结构在前端中有着相当大的存在感,由于我初学前端的时候并没有系统性的学习数组,所以我将通过这篇文章同你一起学习数组,希望我们能一起进步,学会熟练操作数组 ...
随机推荐
- StarUML之一、UML的相关基本概念
为什么用UML 项目需要,在项目开发实现前期进行框架技术设计(条条大路通罗马通罗马,画图或者写代码都可以,适合就可以!). 用户的交互我们通常用Axure(原型设计)体现, 框架和功能结构设计则用UM ...
- Android5.0和Android6.0适配
gradle配置项 compileSdkVersion 用哪个 Android SDK 版本编译你的应用.因此我们强烈推荐总是使用最新的 SDK 进行编译.在现有代码上使用新的编译检查可以获得很多好处 ...
- java 正则表达式空格无法匹配
举个例子 Boolean xx= Pattern.matches("^[a-zA-Z0-9\\s]*$", " 801 Tampines Ave 4 Singapore ...
- 【转】Makefile步步为营
Makefile步步为营 本目录主要包含Makefile一步步递进学习的示例代码 makefile代码实例:https://www.lanzous.com/i9m9npi step0:Makefile ...
- Linux 实时查看日志文件动态内容
tailf 27.log | grep 'Classcomment/praise' 'Classcomment/praise' 接口名:查看请求固定接口的时间,实时 tai ...
- 教你用python爬虫监控教务系统,查成绩快人一步!
教你用python爬虫监控教务系统,查成绩快人一步!这几天考了大大小小几门课,教务系统又没有成绩通知功能,为了急切想知道自己挂了多少门,于是我写下这个脚本. 设计思路:设计思路很简单,首先对已有的成绩 ...
- 装饰器(Python)
装饰器(decorators)是 Python 的一个重要部分.简单地说:装饰器是修改其他函数的功能的函数,能让我们的代码更容易被扩展,更加简短.举个例子: def login(): print(&q ...
- PERC H310 配置详细步骤【阵列RAID创建】【阵列恢复】【阵列池创建】
机器配置: HP PRO6300 二手淘的201912,HP的主板芯片Intel Q75芯片组,集成显卡(集成显卡与H310阵列卡冲突),CPU Intel I5 3450 [raid5阵列创建] 1 ...
- mac 15 IDA7.0 下载安装
吾爱破解上有相应的解决办法,在低版本mac上安装完成后,直接拖到15版本,再打上补丁,补丁可以自己去找,下面是转好了的,mac解压最好不要用自带的解压软件,用BetterZip试试,不行就多解压几次, ...
- LeetCode 面试题 02.06. 回文链表
题目链接:https://leetcode-cn.com/problems/palindrome-linked-list-lcci/ 编写一个函数,检查输入的链表是否是回文的. 示例 1: 输入: 1 ...