vue项目实战：directives filters mixins util 内容的封装
1.directives 做页面按钮权限
/** @Description: 页面按钮权限 directives/permission.js
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-08-12 14:17:46
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:16:23
*/
import Vue from 'vue';
import store from '@/store';
// 指令 有角色时候
// Vue.directive('permission', {
// // inserted函数：当被绑定的元素插入到 DOM 中时……
// inserted(el, binding, vnode) {
// const { value } = binding // 获取指令绑定的值;
// const roles = store.getters && store.getters.roles //用户本身的roles信息,arr;
// if (value && value instanceof Array && value.length > 0) {
// const permissionRoles = value
// const hasPermission = roles.some(role => { // 只要有一个满足即返回true
// return permissionRoles.includes(role)
// })
// // 没有该指令,直接删除掉该指令元素;即页面不显示没有指令权限的按钮;
// if (!hasPermission) {
// el.parentNode && el.parentNode.removeChild(el)
// // 因项目需要，本指令remove其父元素;一般情况下，只隐藏其本身;
// }
// } else {
// throw new Error(`need roles! Like v-permission="['admin','editor']"`)
// }
// }
// });
// 只有code码对应时候 使用时候 v-permission="['100000801']"
Vue.directive('permission', {
// inserted函数：当被绑定的元素插入到 DOM 中时……
inserted(el, binding, vnode) {
// console.log(el, binding, vnode)
const { value } = binding // 获取指令绑定的值;
const btncodeList = store.getters && store.getters.getBtnCodeList.map(e => {return e.buttonCode}); // 权限code码 后端数据返回的数据
// console.log(value, 'value', btncodeList,'btncodeList--指令')
if (value && value instanceof Array && value.length > 0) {
const permissionCode = value;
const hasPermission = btncodeList.some(btncode => { // 只要有一个满足即返回true
return permissionCode.includes(btncode)
})
// 没有该指令,直接删除掉该指令元素;即页面不显示没有指令权限的按钮;
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
// 因项目需要，本指令remove其父元素;一般情况下，只隐藏其本身;
}
} else {
throw new Error(`need roles! Like v-permission="['100000801','100000802']"`)
}
}
});
2.filters 数据一些处理
/** @Description: 常用过滤器方法 可用于数据处理 枚举等操作 filters/index.js 管道符隔开即可 传参即为 | xx（参数一，参数二）
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-08-14 15:36:23
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:17:55
*/
// 官方指南 https://cn.vuejs.org/v2/api/#Vue-filter
// 注册
// Vue.filter('my-filter', function (value) {
// // 返回处理后的值
// })
// 过滤器解析原理:在vue内部专门有这么一个函数用来解析过滤器语法：parseFilters 它的原理就是解析过滤器列表，然后循环过滤器列表并拼接字符串
// // getter，返回已注册的过滤器
// var myFilter = Vue.filter('my-filter')
// input去除空格 type 1-所有空格 2-前后空格 3-前空格 4-后空格
export function trim(value, trim) {
switch (trim) {
case 1:
return value.replace(/\s+/g, "");
case 2:
return value.replace(/(^\s*)|(\s*$)/g, "");
case 3:
return value.replace(/(^\s*)/g, "");
case 4:
return value.replace(/(\s*$)/g, "");
default:
return value;
}
}
//字母大小写切换
/*type
1:首字母大写
2：首字母小写
3：大小写转换
4：全部大写
5：全部小写
* */
export function changeCase(str, type) {
function ToggleCase(str) {
var itemText = ""
str.split("").forEach(
function (item) {
if (/^([a-z]+)/.test(item)) {
itemText += item.toUpperCase();
} else if (/^([A-Z]+)/.test(item)) {
itemText += item.toLowerCase();
} else {
itemText += item;
}
});
return itemText;
}
switch (type) {
case 1:
return str.replace(/\b\w+\b/g, function (word) {
return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();
});
case 2:
return str.replace(/\b\w+\b/g, function (word) {
return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
});
case 3:
return ToggleCase(str);
case 4:
return str.toUpperCase();
case 5:
return str.toLowerCase();
default:
return str;
}
}
//现金额大写转换函数
//ecDo.upDigit(1682)
//result："人民币壹仟陆佰捌拾贰元整"
//ecDo.upDigit(-1693)
//result："欠人民币壹仟陆佰玖拾叁元整"
export function capitalAmountChange(n) {
var fraction = ['角', '分', '厘'];
var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
var unit = [
['元', '万', '亿'],
['', '拾', '佰', '仟']
];
var head = n < 0 ? '欠人民币' : '人民币';
n = Math.abs(n);
var s = '';
for (var i = 0; i < fraction.length; i++) {
s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
}
s = s || '整';
n = Math.floor(n);
for (var i = 0; i < unit[0].length && n > 0; i++) {
var p = '';
for (var j = 0; j < unit[1].length && n > 0; j++) {
p = digit[n % 10] + unit[1][j] + p;
n = Math.floor(n / 10);
}
s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
//s = p + unit[0][i] + s;
}
return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
}
//保留2位小数 四舍五入方法
export function toFiexed2(x) {
var f = parseFloat(x);
if (isNaN(f)) {
return false;
}
var f = Math.round(x * 100) / 100;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s;
}
// 千分符
export function thousandMarkFis(num) {
if (isNaN(num) || !num || Number(num) < 1000) {
return num
}
return num.toString().replace(/\d+/, function (s) {
return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
})
}
3.mixins 页面公共逻辑封装
/** @Description: vue混入 复用的公共js mixins/common.js可单独引入 可以当插件（main.js）注册
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-08-18 16:12:18
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:16:08
*/
export const Mixins = {
data() {
return {}
},
mounted() {
console.log('Mixinsl里面的钩子前')
},
methods: {
// 上移
moveUp(index, list) {
let that = this;
if (index == 0) {
that.$message({
message: "到顶了，不能继续上移",
type: "warning"
});
} else {
let upDate = list[index - 1];
list.splice(index - 1, 1);
list.splice(index, 0, upDate);
}
},
// 下移
moveDown(index, list) {
let that = this;
if (index + 1 === list.length) {
that.$message({
message: "到底了，不能继续下移",
type: "warning"
});
} else {
let downDate = list[index + 1];
list.splice(index + 1, 1);
list.splice(index, 0, downDate);
}
},
}
}
4.util 工具类方法
/** @Description: 空vue实例 vue组件通讯方式的一种 util/eventBus.js
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-07-10 14:35:29
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:18:18
*/
import Vue from 'vue';
export default new Vue()
// 使用 import eventBus from '@/util/eventBus'
// 方法二在main.js 使用 Vue.prototype.$EventBus = new Vue() ====> 组件this.$EventBus.$emit/this.$EventBus.$on即可
/** @Description: 项目工具类方法 util/public.js 也可以结合lodash库有很多方便快捷的工具类方法 https://www.lodashjs.com/ main.js 导入公用方法 或者组件单独导入 import {xx} from '@/util/public'
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-08-19 10:03:17
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:18:46
*/
// 如需项目使用到cookie 安装 npm/cnpm i js-cookie -S 看项目情况是否需要
// import Cookie from 'js-cookie';
// export function getToken() {
// return Cookie.get('token');
// }
// export function setToken(token) {
// Cookie.set('token', token);
// }
// export function removeToken() {
// Cookie.remove('token');
// }
// 防抖
export function debounce(fn, delay) {
var delay = delay || 200;
var timer;
return function () {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delay);
};
}
// 节流
export function throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
//校验手机号码
export function isSpecialPhone(num) {
return /^1[2,3,4,5,7,8]\d{9}$/.test(num)
}
// 拼接参数 比如给 https://www.baidu.com/aa=1&bb=2&cc=3
export function param(data) {
let url = ''
for (let k in data) {
let value = data[k] !== undefined ? data[k] : ''
url += '&' + k + '=' + value
}
return url ? url.substring(1) : ''
}
//遍历参数？后面的
export function formatParam(obj) {
let str = ''
for (let i in obj) {
str += `${i}=${obj[i]}&`
}
return str.slice(0, -1)
// console.log(str) 比如{a:111,b:222,c:333}变为a=111&b=222&c=333
}
//获取地址栏url参数方式一 hash 返回"#"之后的内容 第一个"#"之后的内容
export function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.hash.split("?")[1].match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
//获取地址栏url参数方式一 区别 search "?"后的部分，又称为查询字符串 第一个"?"之后 (经测试应该是：第一个"?"之后 ， #之前)
export function getQueryString2(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
//url参数处理(获取参数)方式二(个人喜好这种)
export var URL = {
set(key, value, url) {
var reg = new RegExp('(' + key + ')=([^&]*)', 'ig');
var url = url ? url : location.href;
var result = reg.exec(url);
if (result) {
return url.replace(result[0], key + '=' + value);
} else {
var reg = /\?(.*)#?(.*)/gi;
var search = reg.exec(url);
if (search !== null) {
return url.replace(search[1], search[1] + '&' + key + '=' + value);;
} else {
return '';
}
}
},
get(key, url) {
var reg = new RegExp('(' + key + ')=([^&]*)', 'ig');
var url = url ? url : location.href;
var result = reg.exec(url);
if (result) {
return result[2];
} else {
return '';
}
}
}
// 判断浏览器类型
export function browserType() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
// 判断是否Opera浏览器
if (userAgent.indexOf("Opera") > -1) {
return "Opera"
};
// 判断是否Firefox浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
}
// 判断是否Chrome浏览器
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
}
//判断是否Safari浏览器
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
}
//判断是否IE浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
};
// IE11
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE11) {
return "IE11";
}
}
/* 判断当前浏览是否为IE */
export function isIEBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = (userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1) || (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1); //判断是否IE浏览器
var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
if (isIE) {
return "IE";
}
if (isEdge) {
return "Edge";
}
return ""
}
// 将base64转换为blob
export function convertBase64UrlToBlob(urlData) {
var arr = urlData.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {
type: mime
})
}
// 压缩图片
export function compressImage(path, config) {
return new Promise((resolve, reject) => {
var img = new Image()
img.src = path
img.onload = function () {
var that = this
var w = that.width
var h = that.height
var scale = w / h
w = config.width || config.height * scale
h = config.height || config.width / scale
var quality = 0.7 // 默认图片质量为0.7
// 生成canvas
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
// 创建属性节点
var anw = document.createAttribute('width')
anw.nodeValue = w
var anh = document.createAttribute('height')
anh.nodeValue = h
canvas.setAttributeNode(anw)
canvas.setAttributeNode(anh)
ctx.drawImage(that, 0, 0, w, h)
if (config.quality && config.quality <= 1 && config.quality > 0) {
quality = config.quality
}
var base64 = canvas.toDataURL('image/*', quality)
// var blob = convertBase64UrlToBlob(base64)
// 回调函数返回base64的值，也可根据自己的需求返回blob的值
resolve(base64)
}
})
}
/**
* 将秒数转为时间格式
* @format
* @param data {number} 时间戳
* @param format {string} 时间格式[完整格式：yyyy-MM-dd HH:mm:ss，默认yyyy-MM-dd]
* @param text {string} 缺省文字
*/
export function timeFormat(data, format, text) {
if (data === null || data === '' || data === undefined) {
return text || '';
}
format = format || 'yyyy-MM-dd';
let week = [
'星期日',
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六'
];
let date = new Date(data);
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours() % 12,
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
'q+': Math.floor((date.getMonth() + 3) / 3),
'S+': date.getMilliseconds(),
'W+': week[date.getDay()]
};
if (/(y+)/.test(format))
format = format.replace(
RegExp.$1,
(date.getFullYear() + '').substr(4 - RegExp.$1.length)
);
for (let k in o)
if (new RegExp('(' + k + ')').test(format))
format = format.replace(
RegExp.$1,
RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
);
return format;
}
/**
* 将字符串时间转换为时间戳
* @param {string} date
*/
export function getDateTime(date) {
let timestamp = '';
if (date) {
date = date.substring(0, 19);
date = date.replace(/-/g, '/'); // 必须把日期'-'转为'/'
timestamp = new Date(date).getTime();
}
return timestamp;
}
/**
* @function deepCopy 浅/深拷贝
* @param {type} obj {description}
* @return {type} {description}
*/
export function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
// 验证中国大陆身份证号码
export function isIDCard(str) {
var reg = /^[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)$/;
return reg.test(str);
}
/*
*验证邮箱格式是否正确
*参数 email，需要验证的邮箱
*/
export function chkEmail(email) {
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
return reg.test(email);
}
/**
* 指定字符串 溢出显示省略号
* @param {String} str
* @param {Number} num
*/
export function getSubStringSum(str = "", num = 1) {
let newStr;
if (str) {
str = str + '';
if (str.trim().length > num) {
newStr = str.trim().substring(0, num) + "...";
} else {
newStr = str.trim();
}
} else {
newStr = ''
}
return newStr;
}
// 去除html标签
export function htmlSafeStr(str){
return str.replace(/<[^>]+>/g, "")
}
以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！
以上是 vue项目实战：directives filters mixins util 内容的封装 的全部内容， 来源链接： utcz.com/z/379034.html
