在日常项目中,通常会需要根据后台接口返回的数据,来判断当前用户的按钮操作权限。对于当前登录用户来说,只有在当前按钮有该权限时,才显示此按钮;当前按钮没有这个权限时,就不显示这个按钮。针对这种场景,可以通过 Vue.directive
自定义全局注册指令来进行按钮级别权限控制。
概念
除了默认设置的核心指令( v-model
和 v-show
), vue
允许注册自定义指令,可以对普通 DOM
元素进行底层操作。这是一种有效的的补充和扩展,不仅可以用于定义任何的 dom
操作,而且是可以复用的。
注册一个自定义指令分为:
1)全局注册
2)局部注册
全局自定义指令
Vue.directive
:用于全局注册或获取全局指令,该指令可以写一个自定义的事件。
Vue.directive(el, hooks)
参数一(el
):自定义指令的名称
参数二(hooks
):自定义指令的钩子函数对象
局部自定义指令
局部自定义指令是一个对象,对象的属性是自定义指令的名称,对象中属性的值是自定义指令的钩子函数对象。如下:
<template>
<div></div>
</template>
<script>
export default {
directives: {
// 属性名称是自定义的指令名称
// 属性值是自定义指令的钩子函数对象
name: {
}
}
}
</script>
自定义指令钩子函数以及钩子函数的参数
Vue.directive('permission', {
bind: function (el, binding, vnode) {
},
inserted: function (el, binding, vnode) {
},
update: function (el, binding, vnode, oldVnode) {
},