Vue 创建自定义指令以及创建自定义指令相关属性说明

`Vue` 创建自定义指令

Vue 除了使用内置的指令外，还可以创建自定义指令。

自定义指令的作用是扩展 Vue 的功能，可以自定义指令的行为，比如：

自定义指令可以绑定到元素上，可以监听元素的事件，执行自定义的逻辑。
自定义指令可以接收参数，可以动态修改指令的行为。
自定义指令可以添加多个，可以组合使用。

自定义指令的语法

自定义指令的语法如下：

<div v-指令名称:参数="表达式"></div>

指令名称：自定义指令的名称，可以自定义，但需要以 v- 开头。
参数：可选参数，可以接收指令的附加参数。
表达式：指令的表达式，可以动态修改指令的行为。

自定义指令的创建

自定义指令的创建需要使用 Vue.directive 方法，该方法接收两个参数：

指令名称：自定义指令的名称。
指令对象：一个对象，包含三个函数：

自定义指令的使用方法如下：

// 注册自定义指令
Vue.directive("指令名称", {bind: function (el, binding, vnode) {// 指令绑定时执行的函数},update: function (el, binding, vnode, oldVnode) {// 指令更新时执行的函数},unbind: function (el, binding, vnode) {// 指令解绑时执行的函数},
});

bind：指令绑定时执行的函数，参数如下：
- el：指令绑定的元素。
- binding：一个对象，包含以下属性：
  - name：指令名称。
  - value：指令表达式的值。
  - oldValue：指令表达式的旧值。
  - expression：指令表达式。
  - arg：指令参数。
  - modifiers：一个对象，包含修饰符。
- vnode：指令所在的虚拟节点。
update：指令更新时执行的函数，参数如下：
- el：指令绑定的元素。
- binding：一个对象，包含以下属性：
  - name：指令名称。
  - value：指令表达式的值。
  - oldValue：指令表达式的旧值。
  - expression：指令表达式。
  - arg：指令参数。
  - modifiers：一个对象，包含修饰符。
- vnode：指令所在的虚拟节点。
- oldVnode：指令所在的旧虚拟节点。
unbind：指令解绑时执行的函数，参数如下：
- el：指令绑定的元素。
- binding：一个对象，包含以下属性：
  - name：指令名称。
  - value：指令表达式的值。
  - oldValue：指令表达式的旧值。
  - expression：指令表达式。
  - arg：指令参数。
  - modifiers：一个对象，包含修饰符。
- vnode：指令所在的虚拟节点。

自定义指令的示例 - 控制页面按钮的显示隐藏 v-hasPermi

注册自定义指令：

Vue.directive("hasPermi", {bind: function (el, binding, vnode) {// 获取权限列表var permissons = vnode.context.$route.meta.permissons;// 获取按钮的名称var btnName = binding.arg;// 获取按钮的显示隐藏状态var show = false;// 遍历权限列表，判断按钮是否显示for (var i = 0; i < permissons.length; i++) {if (permissons[i] === btnName) {show = true;break;}}// 根据显示隐藏状态，显示或隐藏按钮if (show) {el.style.display = "block";} else {el.style.display = "none";}},
});

在页面中使用自定义指令：

<button v-hasPermi="'btn1'">按钮1</button>
<button v-hasPermi="'btn2'">按钮2</button>
<button v-hasPermi="'btn3'">按钮3</button>

其中，btn1、btn2、btn3 是权限列表，页面中只有 btn1 按钮的权限，所以 btn1 按钮显示，其他按钮隐藏。

页面路由配置：

const routes = [{path: "/home",name: "home",component: Home,meta: {permissons: ["btn1"],},},{path: "/about",name: "about",component: About,meta: {permissons: ["btn2", "btn3"],},},
];

页面路由切换时，根据路由的 meta.permissons 列表，动态显示或隐藏按钮。

`Vue3` 组合式 api 使用自定义指令

Vue3 组合式 api 允许我们在 setup 函数中使用组合式 api，包括 directives、provide、inject、watchEffect 等。

在 setup 函数中使用自定义指令，需要先注册自定义指令，然后在 directives 选项中添加自定义指令的名称。

import { ref, onMounted } from "vue";export default {name: "App",setup() {const count = ref(0);const increment = () => {count.value++;};onMounted(() => {console.log("mounted");});return {count,increment,};},directives: {hasPermi: {mounted(el, binding) {// 获取权限列表const permissons = binding.instance.proxy.$route.meta.permissons;// 获取按钮的名称const btnName = binding.arg;// 获取按钮的显示隐藏状态let show = false;// 遍历权限列表，判断按钮是否显示for (let i = 0; i < permissons.length; i++) {if (permissons[i] === btnName) {show = true;break;}}// 根据显示隐藏状态，显示或隐藏按钮if (show) {el.style.display = "block";} else {el.style.display = "none";}},},},
};

注册自定义指令：

directives: {hasPermi: {mounted(el, binding) {// 获取权限列表const permissons = binding.instance.proxy.$route.meta.permissons;// 获取按钮的名称const btnName = binding.arg;// 获取按钮的显示隐藏状态let show = false;// 遍历权限列表，判断按钮是否显示for (let i = 0; i < permissons.length; i++) {if (permissons[i] === btnName) {show = true;break;}}// 根据显示隐藏状态，显示或隐藏按钮if (show) {el.style.display = "block";} else {el.style.display = "none";}},},
},

在页面中使用自定义指令：

<button v-hasPermi="'btn1'">按钮1</button>
<button v-hasPermi="'btn2'">按钮2</button>
<button v-hasPermi="'btn3'">按钮3</button>

其中，btn1、btn2、btn3 是权限列表，页面中只有 btn1 按钮的权限，所以 btn1 按钮显示，其他按钮隐藏。

页面路由配置：

const routes = [{path: "/home",name: "home",component: Home,meta: {permissons: ["btn1"],},},{path: "/about",name: "about",component: About,meta: {permissons: ["btn2", "btn3"],},},
];