vue directive全局自定义指令实现按钮级别权限控制

＊且听风吟

已于 2023-02-08 19:58:47 修改

阅读量1.5k

点赞数 2

分类专栏： # Vue 2.x 文章标签： vue.js 前端 javascript

于 2023-02-04 17:45:00 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/128855140

版权

本文介绍了如何使用Vue.js自定义全局指令实现按钮级别的权限控制。通过自定义指令的钩子函数，根据后端返回的权限数据动态控制按钮的显示和隐藏，确保用户只有在拥有相应权限时才能看到并操作按钮。详细阐述了自定义指令的生命周期、参数及其在项目中的实际应用。

摘要由CSDN通过智能技术生成

在日常项目中，通常会需要根据后台接口返回的数据，来判断当前用户的按钮操作权限。对于当前登录用户来说，只有在当前按钮有该权限时，才显示此按钮；当前按钮没有这个权限时，就不显示这个按钮。针对这种场景，可以通过 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) {
   },