7.高精度权限控制—自定义指令directive
我们通常给一个元素添加 v-if / v-show 来做权限管理,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余。
针对这种情况,我们可以通过全局自定义指令来处理:我们先在新建个 array.js 文件,用于存放与权限相关的全局函数
// array.js
export function checkArray (key) {
let arr = ['1', '2', '3', '4', 'demo']
let index = arr.indexOf(key)
if (index > -1) {
return true // 有权限
} else {
return false // 无权限
}
}
然后在将 array 文件挂载到全局中:
// main.js
import { checkArray } from "./common/array";
Vue.directive("permission", {
inserted (el, binding) {
let permission = binding.value; // 获取到 v-permission的值
if (permission) {
let hasPermission = checkArray(permission);
if (!hasPermission) { // 没有权限 移除Dom元素
el.parentNode && el.parentNode.removeChild(el);
}
}
}
});
最后我们在页面中就可以通过自定义指令 v-permission 来判断:
<div class="btns">
<button v-permission="'1'">权限按钮1</button> // 会显示
<button v-permission="'10'">权限按钮2</button> // 无显示
<button v-permission="'demo'">权限按钮3</button> // 会显示
</div>
6.一劳永逸的组件注册
通常在组件使用前,需要引入后再注册,但如果高频组件多了,每次都这样做,不仅新增很多代码,效率还低!我们应该如何优化呢?
其实,我们可以借助一下webpack的require.context() 方法来创建自己的(模块)上下文,从而实现自动动态require组件。
我们先在components文件夹(这里面都是些高频组件)添加一个叫global.js的文件,在这个文件里使用require.context 动态将需要的高频组件统统打包进来,然后在main.js文件中引入global.js的文件。
// global.js文件
import Vue from 'vue'
function changeStr (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context('./', false, /\.vue$/)
// 查找同级目录下以vue结尾的组件
const install = () => {
requireComponent.keys().forEach(fileName => {
let config = requireComponent(fileName)
console.log(config) // ./child1.vue 然后用正则拿到child1
let componentName = changeStr(
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
)
Vue.component(componentName, config.default || config)
})
}
export default {
install // 对外暴露install方法
}
最后我们就可以随时随地在页面中使用这些高频组件,无需再手动一个个引入了。
//main.js
import globals from './components/form/global'
Vue.use(globals)
5.blob2base64
let blob2base64 = async (blobData, type = 'image/jpeg') => {
let blob = new Blob([blobData], { type: type })
let fileReader = new FileReader()
let result = await new Promise((resolve, reject) => {
fileReader.readAsDataURL(blob)
fileReader.onload = (e) => {
resolve(e.target.result)
}
})
return result
}
export default {
blob2base64
}
或者这样:
4.base64 字符串之间的转化
const addBase64 = (str) => {
// 对字符串进行编码
const encode = encodeURI(str);
// 对编码的字符串转化base64
const base64 = btoa(encode);
return base64;
};
// base64转字符串
const transBase64 = (base64) => {
// 对base64转编码
const decode = atob(base64);
// 编码转字符串
const str = decodeURI(decode);
return str;
};
export {
addBase64, transBase64,
};
3格式化日期相关
/**
* @description 转UTC时间格式
* @param {time} time如果是'start'表示本年度的1月1日00:00:00 ,如果是'end'表示本年度的12月31日23:59:59 ,time也可以是Date构造函数的实参
* @return String UTC格式的时间字符串
*/
export const formatDateToUtc = (time) => {
const curDate = new Date()
const curYear = curDate.getFullYear()
if (time === 'start') {
return new Date(`${curYear}-1-1`).toISOString()
} else if (time === 'end') {
return new Date(`${curYear + 1}-1-1`).toISOString()
} else {
return new Date(time).toISOString()
}
}
/**
* @description UTC时间转正常时间
*/
export const dateFormat = (timer) => {
let date = new Date(timer)
let y = String(date.getFullYear()).padStart(4, 0)
let M = String(date.getMonth() + 1).padStart(2, 0)
let d = String(date.getDate()).padStart(2, 0)
let h = String(date.getHours()).padStart(2, 0)
let m = String(date.getMinutes()).padStart(2, 0)
let s = String(date.getSeconds()).padStart(2, 0)
return `${y}-${M}-${d} ${h}:${m}:${s}`
}
**时间戳转正常日期**
function dateFormat(time, format = "YYYY-MM-DD HH:mm:ss") {
let date = new Date(time)
const config = {
YYYY: date.getFullYear(),
MM: date.getMonth() + 1,
DD: date.getDate(),
HH: date.getHours(),
mm: date.getMinutes(),
ss: date.getSeconds()
};
for (const key in config) {
format = format.replace(key, config[key]);
}
return format;
}
console.log(dateFormat(1588754368262, "YYYY年MM月DD日"));
2防抖与节流
/**
* @description 防抖
*/
function debance(fn, delay) {
let timer = null;
return () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn();
}, delay);
};
}
window.addEventListener(
"scroll",
debance(() => {
console.log(111);
}, 1000)
);
/** * @description 节流 */
//方法一:设置一个标志
function throttle(fn, delay) {
let flag = true;
return () => {
if (!flag) return;
flag = false;
timer = setTimeout(() => {
fn();
flag = true;
}, delay);
};
}
//方法二:使用时间戳
function throttle(fn, delay) {
let startTime=new Date()
return () => {
let endTime=new Date()
if (endTime-startTime>=delay){
fn()
startTime=endTime
}else{
return
}
};
}
window.addEventListener(
"scroll",
throttle(() => {
console.log(111);
}, 1000)
);
1截取地址栏参数
getQueryString: function(key) {
var reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)')
var result = window.location.search.substr(1).match(reg)
return result ? decodeURIComponent(result[2]) : null
}