vue3的自定义指令(v-has)

vue3的自定义指令

借鉴：https://blog.csdn.net/weixin_42349568/article/details/125060231.

1.vue3和vue2的写法变化

官网中是这样介绍的：https://v3.cn.vuejs.org/guide/migration/custom-directives.html#_2-x-%E8%AF%AD%E6%B3%95
在 Vue 3 中，我们为自定义指令创建了一个更具凝聚力的 API。正如你所看到的，它们与我们的组件生命周期方法有很大的不同，即使钩子的目标事件十分相似。我们现在把它们统一起来了：

created - 新增！在元素的 attribute 或事件监听器被应用之前调用。
bind → beforeMount
inserted → mounted
beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。
update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。
componentUpdated → updated
beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
unbind -> unmounted

2.v-has写法

2-1.在utils工具下创建文件 hasPermission.ts

export const hasPermission = {
  install(Vue: any, options: any) {
    //自定义指令v-has：
    Vue.directive('has', {
      mounted(el: any, binding: any) {
        if (!checkPermission(binding.value)) {
          el.parentNode.removeChild(el);
        }
      },
    });
    //权限检查方法
    function checkPermission(value: any) {
      let isExist = false;

      let buttonArr = JSON.parse(localStorage.getItem("permissionButton") || "[]");

      //判断是否按钮有权限
      if (buttonArr.includes(value)) {
        isExist = true;
      }
      return isExist;

    };
  }
};
export default hasPermission;

2-1.在 main.ts中全局引入方法

import hasPermission from '@/utils/hasPermission';
app.use(hasPermission)
//挂载到页面上
app.mount('#app');