image.png
详细：directive文档
案例：
高精度权限控制—自定义指令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>
如果是store 权限
image.png
1.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
buttonRule: {
add: true,
edit: false,
delete: false
}
},
mutations: {},
actions: {},
modules: {}
})
<template>
<div class="container">
<el-button v-has="'add'">编辑</el-button>
<el-button type="primary" v-has="'edit'">添加</el-button>
<el-button type="success" v-has="'delete'">删除</el-button>
</div>
</template>
<script>
import has from './directive/has'
export default {
directives: {
has
}
}
</script>
<style>
</style>
2.新建directive文件目录新建has.js
export default {
inserted(el, bindings, vnode) {
// console.log(el) // 当前dom节点
// console.log(bindings) //节点数据
// console.log(vnode) //虚拟节点获取数据
let btnRule = bindings.value //获取节点值
let bollean = vnode.context.$store.state.buttonRule[btnRule] //获取store 状态值
console.log(bollean);
!bollean && el.parentNode.removeChild(el)
}
}
image.png
