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,持续更新中
写在前面 随着前端深入的不断学习,发现数组这个数据结构在前端中有着相当大的存在感,由于我初学前端的时候并没有系统性的学习数组,所以我将通过这篇文章同你一起学习数组,希望我们能一起进步,学会熟练操作数组 ...
随机推荐
- window下建立vue.js项目
安装node.js 直接下载安装文件安装就可以了 vue项目搭建 .到自己要件项目的文件夹运行cmd命令 .如果没有安装vue-cli .npm install -g vue-cli .vue ini ...
- Windows-server-2008-R2安装Oracle-11g-R2-dataguard
一.安装环境 1.服务器环境:Windows server 2008 R2 x64 Standard 两台 CPU:8核 内存:8G 硬盘空间:1060G 2.软件:oracle 11g R2 二.安 ...
- 解决打开的小窗口回调参数的问题,layui
问题: 给用户新增优惠券,单个用户,单个优惠券,新增的话,用输入窗点击事件,点击后弹出一个子窗口列表页,选择数据后,点击确定,信息传回父窗口,主要是解决传值的问题. 解决思路: ...
- redis 5.0.7 源码阅读——字典dict
redis中字典相关的文件为:dict.h与dict.c 与其说是一个字典,道不如说是一个哈希表. 一.数据结构 dictEntry typedef struct dictEntry { void * ...
- Spring Boot从入门到精通(一)搭建第一个Spring Boot程序
Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过 ...
- kali帮助
kali help Attention 这是我N久前学习kali时自己打的东西,不保证没有纰漏啊…… 网址 kali:https://www.herojd.com/forum.php?mod=view ...
- js对象模型2
g
- R语言矩阵维度“消失”的问题
矩阵(matrix)是R语言中很基础的一种数据结构,也是R语言使用者经常使用的一种数据结构.矩阵的维度一般为二维(m*n). R语言中矩阵的操作是非常简单易懂的,但是在对R语言做矩阵操作时,有个地方需 ...
- 用ArcGIS Runtime for Android建立简单App,展示地图
1.新建AS项目 此处引用官网上新建项目的过程,很简单,不做翻译了. 2.配置ArcGIS Runtime for Android100.5.0环境 2-1.项目切换成Project 2-2 .选择P ...
- 50元求解pyqt加载并显示pdf问题
50块钱求解决pyqt5加载pdf文档并显示,类似briss软件的效果