vue 自定义权限

2024-03-11 11:44:55

vue中内置了很多指令，如v-show v-model等，如果我们也想对dom元素进行底层操作呢，这时就可以使用vue的自定义指令。

自定义指令有全局和局部两种形式。

对于全局自定义指令，我们需要用到Vue.directive接口，

下面我们注册一个全局的自定义指令v-permission

Vue.directive('permission',{
  inserted: function (el,binding,vNode) {
    console.log(el.innerText+': '+ binding.value)
    }
  },
})

这样我们就可以在模板中任何元素上使用我们刚刚新加的自定义指令v-permission了

   <el-button @click="callTel" size="small" type="primary" v-permission="'3902947C-63D1-4293-A6D0-83BA8D37F2AC'" >拨打电话</el-button>

钩子函数

一个指令定义对象可以提供如下几个钩子函数：

bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind 只调用一次，指令与元素解绑时调用。

对象字面量

如果指令需要传入多个值，可以传入一个js对象的字面量。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

码农公寓