vue3的自定义指令

当需要不同的用户权限展示不同功能时，可以封装一个自定义指令代替v-if的指令。

1.局部自定义指令

只在当前.vue的文件中可以使用
定义一个自动获取焦点的自定义指令： vFocus ，给input加上v-focus指令，input会自动获取焦点

<template>
  <input type="text" v-focus />
</template>

<script setup>
const vFocus = {
  mounted(el) {
    el.focus();
  },
};
</script>

2.全局自定义指令

所有页面都可以使用，一般写在main.js里，也可以单独写在js文件中，在main.js里引入
下面在main.js中定义的用户权限指定令 v-hasPermission，只显示权限为admin的元素

const permission = 'admin';
app.directive('hasPermission',{
  mounted(el,binding,vnode){
    const { value } = binding;
    if(value !== permission){
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
})

vue页面使用

<template>
  <button v-hasPermission="'admin'">admin</button>
  <button v-hasPermission="'user'">user</button>
</template>

页面中只显示admin

3.自定义指令的钩子函数

一共是7个钩子函数，日常开发中用的最多的是 mounted 函数。

• created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。

• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。

• mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里。

• beforeUpdate：在更新包含组件的 VNode 之前调用。

• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

• beforeUnmount：在卸载绑定元素的父组件之前调用

• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

4.钩子函数的参数

• el：指令所绑定的元素，可以用来直接操作 DOM，v-hasPermission就是通过 el 对象来操作 DOM 节点是否显示。

• binding：通过自定义指令传递的各种参数，主要存于这个对象中，日常开发使用较多的几个：

  • name：指令名，不包括 v- 前缀。

  • value：指令的绑定值，可以是数组，字符串等。

  • expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。

  • arg：传给指令的参数，可选。例如 v-hasPermission:[name]=“‘zhangsan’” 中，参数为 “name”。

• vnode：Vue 编译生成的虚拟节点。

• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

参考：
手把手教你在 Vue3 中自定义指令