vue除了默认设置的核心指令( v-model ,v-show,v-if ), Vue 也允许注册自定义指令。自定义指令就是一种有效的补充和扩展,不仅仅可用于定义任何dom操作,并且是可以复用的。目前项目刚好是有在做按钮权限方面的功能,我实现的方式就是用自定义指令(v-permission)来实现的。
在src下面创建一个directives的文件夹
在文件夹里创建一个permision文件内容如下:
export default {
inserted(el, bindling) {
//bindling.value为指令的绑定值
let perVal = bindling.value;
if (bindling.value) {
//hasPermision this.checkValidate是我们项目的自定义的检验权限码的方法
// 校验的方法可以自由发挥
let hasPermision = this.checkValidate(perVal)
//没有权限就先隐藏此元素吧
if (!hasPermision) {
el.style.display = "none"
}
}
}
}
然后再将permission.js引入到同文件下的index.js:
import permission from "./permission"
import toFixed from "./toFixed"
//批量注册指令
const directives = {
permission,
toFixed
}
//注册的一般写法,循环遍历directives,通过vue.directive注册
export default {
install(Vue){
Object.keys(directives).forEach(key=>{
Vue.directive(key,directives[key])
})
}
}
然后在main.js里面全局引入index.js(当然我们也可以选择按需引入,可以根据不同的场景来)
最后使用自定义指令的话就和Vue自带的指令是一样