我们可以通过全局自定义指令来处理判断条件繁琐且多个地方需要判断( 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 // 无权限
}
}
main.js内容
import { checkArray } from './utils/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);
}
}
}
});
html内使用
<div class="btns">
<button v-permission="'1'">权限按钮1</button> // 会显示
<button v-permission="'10'">权限按钮2</button> // 无显示
<button v-permission="'demo'">权限按钮3</button> // 会显示
</div>