先附上自定义指令代码,然后解释 (大神只需要看关键代码)
自定义一个customDirectives.js
放到自己想放的目录(滑稽),我是决定在main.js全局引入,因为很多界面都要用,也可以用局部引入
const customDirectives = {}
function directives(Vue, options) {
/**
* 带权限ID参数的点击指令
*/
Vue.directive('role-click', {
inserted(el, binding, vNode) {
/*第一次初始化点击事件*/
roleClickChange(el, binding, vNode);
},
componentUpdated(el, binding, vNode) {
/*数据更新后,更新点击事件,重新绑定参数(这一步操作是为了解决在调用时,传了自定义的动态参数,参数不更新问题)*/
roleClickChange(el, binding, vNode);
}
})
/**
* 按钮权限指令
*/
Vue.directive('role', {
inserted(el, binding, vNode) {
let isPermission = false;//是否有权限
//获取权限值,可以通过指令直接传参,或者从一个自定义的属性获取值
let number = binding.value;
if(!number){
number = (el.attributes['roleNum'] !==