自定义指令-控制功能权限

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

注册一个自定义指令，控制功能权限

一、自定义指令是什么？

在Vue.js中，自定义指令是一种用于封装 DOM 交互逻辑的特殊方式。
通过自定义指令，你可以直接操作 DOM，添加事件监听器，设置样式等

自定义指令允许你在 Vue 实例化的时候注册全局或局部的可重用指令，并在模板中使用。
指令是以 v- 开头的特殊属性

二、使用步骤

1. 一个栗子

你可以创建一个名为 v-focus 的自定义指令，使得某个元素在页面加载时获得焦点

// 全局注册自定义指令
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

<input v-focus>

2. v-permission自定义指令

1.1 全局注册组件

el是绑定的dom元素的对象
binding是v-permission=“表达式” 表达式的信息

//注册自定义指令  控制功能权限 
Vue.directive('permission', {
  //inserted会在指令作用的元素插入之后执行
  inserted(el, binding) {
	//console.log(el,binding)   打印一下看看（要应用在dom元素上之后才能看到捏）
  }
})

---

1.2 应用在dom元素上

 <el-button size="mini" type="primary" v-permission @click="$router.push('/employee/detail')">添加员工</el-button>

---

1.3 引入store

这个例子是根据points是否标识来判断是正常显示还是禁用 添加员工 按钮

import store from './store'

Vue.directive('permission', {
  //inserted会在指令作用的元素插入之后执行
  inserted(el, binding) {
    const points = store.state.user.userInfo?.roles?.points || []
    //拿到了points  是否有add-employee
  }
})

---

1.4 传入add-employee

给v-permission传入一个add-employee，也就是传入了binding

 <el-button size="mini" type="primary" v-permission="add-employee" @click="$router.push('/employee/detail')">添加员工</el-button>

接下来判断points是否含有这个值，从而进行下一步操作

Vue.directive('permission', {
  //inserted会在指令作用的元素插入之后执行
  inserted(el, binding) {
    const points = store.state.user.userInfo?.roles?.points || []
    //拿到了points  是否有add-employee
    if (!points.includes(binding.value))
      //不含有则禁用/删除
      el.remove()
    //el.disabled()  禁用
  }
})

---

1.5 运行结果

⬇含有，有这个功能权限

⬇不含有，没有这个功能权限

总结

自留复盘，欢迎指正🫡🫡🫡