1, vue2 项目移植自定义指令到vue3 失效

在升级vue3项目(vue-element-admin: https://panjiachen.github.io/vue-element-admin-site/)时, 发现vue2的指令功能失效, 查阅资料发现这是一个break升级.

所以需要修改directive使用方法和结构

2, 重写directive

src/directive/permission/test.js

  2. import store from '@/store'
  4. export const Permission = app => {
  5.   app.directive('permission', {
  6.     mounted(el, binding) {
  7.       const RoleID = store.getters.currentRoleID
  8.       // el: 当前标签 binging.value: v-permission绑定的值
  9.      // console.log('el',el);
  10.      // console.log('binding.value', binding.value)
  11.       if (binding.value && RoleID !== binding.value) {
  12.         if (binding.value.length > 0) {
  13.           const permissionRoles = binding.value
  14.           if (!permissionRoles.includes(RoleID)) {
  15.             console.log("delete");
  16.             console.log(el.parentNode);
  17.             el.parentNode.removeChild(el)
  18.           }
  19.         }
  20.       } else {
  21.         throw new Error(`need roles! Like v-permission="['admin','editor']"`)
  22.       }
  23.     }
  24.   })
  25. }
  26. // vue 中指令的钩子:
  27. 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
  29. created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。
  31. beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
  33. mounted：在绑定元素的父组件被挂载前调用。
  35. beforeUpdate：在更新包含组件的 VNode 之前调用。
  37. updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
  39. beforeUnmount：在卸载绑定元素的父组件之前调用
  41. unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。
  42. 原文: https://v3.cn.vuejs.org/api/application-api.html#directive

src/store/module/user.js

  1. const state = {
  2.   roles: ['admin'],
  3. }

src/store/getters.js

  1. const getters = {
  2.   roles: state => state.user.roles,
  3. }
  4. export default getters

3, 注册directive到全局

main.js

  2. // 注册自定义指令
  3. import * as Directives from '@/directive/permission/test'
  4. Object.values(Directives).forEach(fn => fn(app))

4, 直接在vue文件中使用, 不需要额外引入

  1. // 若v-test="'admin'", 则存在permissionList, 会显示
  2. // 若v-test="'editor'", 则不存在permissionList, 不会显示
  3. <div v-test="'editor'">hello world</div>

参考: https://huzhushan.gitee.io/vue3-element-admin/guide/directive.html#%E6%9D%83%E9%99%90%E5%88%97%E8%A1%A8

项目地址:https://github.com/huzhushan/vue3-element-admin