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

迷南。 2023-09-28 16:35 110阅读 0赞

TienChin 项目前端是 Vue3，前端有这样的一个需求：有一些前端页面上的按钮要根据用户的权限来决定是否展示出来，如果用户具备相应的权限，那么就展示对应的按钮；如果用户不具备对应的权限，那么按钮就隐藏起来。大致上就这样一个需求。

看到这个需求，可能有小伙伴首先想到用 v-if 指令，这个指令确实也能做，但是，由于用户具备的权限一般来说可能是多个，甚至可能还有通配符，所以这个比对并不是一个容易的事情，肯定得写方法。。。所以，如果能用一个指令来实现这个功能，那么就会显得专业很多了。

说干就干，我们来看看 Vue3 中如何自定义指令。

### 1. 成果展示 ###

我们先来看看实现自定义指令最终的使用方式：

<button @click="btnClick" v-hasPermission="['user:delete']">删除用户</button>

小伙伴们看到，这个 `v-hasPermission` 就是我们的自定义指令，如果当前用户具备 `user:delete` 权限，这个按钮就会展示出来，如果当前用户不具备这个权限，这个按钮就不会展示出来。

### 2. 指令基础 ###

先要和小伙伴们说一下，Vue2 和 Vue3 在自定义指令上有一些差异，并不完全一致，下面的介绍主要是针对 Vue3 的介绍。

我先来和小伙伴们分享一下我们具体是怎么做的，然后在讲解代码的时候再来和大家说说各个参数的含义。

#### 2.1 两种作用域 ####

自定义指令可以定义全局的，也可以定义局部的。

在正式开搞之前，小伙伴们需要先明白，自定义指令有两种作用域，一种是局部的自定义指令，还有一种是全局的自定义指令。局部的自定义指令就只能在当前 `.vue` 文件中使用，全局的则可以在所有的 `.vue` 文件中使用。

2.1.1 局部指令

直接在当前 .vue 文件中定义即可，如下：

directives: {
      focus: {
        // 指令的定义
        mounted(el) {
          el.focus()
        }
      }
    }

不过，在 Vue3 中，也可以这样写：

<template>
        <div>
            <button v-onceClick="10000" @click="btnClick">ClickMe</button>
        </div>
    </template>
    
    <script>
    
        import {ref} from 'vue';
    
        export default {
            name: "MyVue01",
            setup() {
                const a = ref(1);
                const btnClick = () => {
                    a.value++;
                }
                return {a, btnClick}
            },
            directives: {
                onceClick: {
                    mounted(el, binding, vnode) {
                        el.addEventListener('click', () => {
                            if (!el.disabled) {
                                el.disabled = true;
                                setTimeout(() => {
                                    el.disabled = false;
                                }, binding.value || 1000);
                            }
                        });
                    }
                }
            }
        }
    </script>

这里我自定义了一个名叫 onceClick 的指令，给一个 button 按钮加上这个指令之后，可以设置这个 button 按钮在点击多久之后，处于禁用状态，防止用户重复点击。

小伙伴们看，这个指令的执行逻辑其实很简单，el 相当于添加了这个指令的元素，监听该元素的点击事件，如果点击该元素时，该元素不是处于禁用状态，那么就设置该元素为禁用，给一个定时任务，到期后使该元素变为可用。这里边具体的参数，松哥下面会跟大家详细介绍。

不过这只是一个局部指令，只能在当前 .vue 文件中使用，我们也可以定义全局指令，这样就可以在所有的 .vue 文件中使用了。

2.1.2 全局指令

全局指令我们一般写在 main.js 中，或者写一个单独的 js 文件然后在 main.js 中引入，下面的例子是直接写在 main.js 中：

const app = createApp(App);
    
    app.directive('onceClick',{
        mounted(el, binding, vnode) {
            el.addEventListener('click', () => {
                if (!el.disabled) {
                    el.disabled = true;
                    setTimeout(() => {
                        el.disabled = false;
                    }, binding.value || 1000);
                }
            });
        }
    })

这样，我们就可以随时随地去使用 `v-onceClick` 这个指令了。

可能小伙伴感觉比较疑惑，自定义指令时候的 mounted 以及这里的参数都是咋回事，那么接下来松哥就来和大家详细介绍一下这些方法和参数。

#### 2.2 七个钩子函数 ####

在 Vue3 中，自定义指令的钩子函数主要有如下七种（这块跟 Vue2 差异较大）：

*  created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。
 *  beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
 *  mounted：在绑定元素的父组件被挂载后调用，**大部分自定义指令都写在这里**。
 *  beforeUpdate：在更新包含组件的 VNode 之前调用。
 *  updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
 *  beforeUnmount：在卸载绑定元素的父组件之前调用
 *  unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

虽然钩子函数比较多，看着有点唬人，不过我们日常开发中用的最多的其实是 mounted 函数。

#### 2.3 四个参数 ####

这里七个钩子函数，钩子函数中有回调参数，回调参数有四个，含义基本上和 Vue2 一致：

*  el：指令所绑定的元素，可以用来直接操作 DOM，我们松哥说想实现一个可以自动判断组件显示还是隐藏的指令，那么就可以通过 el 对象来操作 DOM 节点，进而实现组件的隐藏。
 *  binding：我们通过自定义指令传递的各种参数，主要存在于这个对象中，该对象属性较多，如下属性是我们日常开发使用较多的几个：
    
     *  name：指令名，不包括 v- 前缀。
     *  value：指令的绑定值，例如：`v-hasPermission="['user:delete']"` 中，绑定值为 `'user:delete'`，不过需要小伙伴们注意的是，这个绑定值可以是数组也可以是普通对象，关键是看你具体绑定的是什么，在 2.1 小节的案例中，我们的 value 就是一个数字。
     *  expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
     *  arg：传给指令的参数，可选。例如 `v-hasPermission:[name]="'zhangsan'"` 中，参数为 "name"。
 *  vnode：Vue 编译生成的虚拟节点。
 *  oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

### 2.4 动态参数 ###

有一种动态参数，这里也和小伙伴们分享下。正常情况下，我们自定义指令时传递的参数都是通过 binding.value 来获取到的，不过在这之外还有一种方式就是通过 binding.arg 获取参数。

我举一个简单例子，假设我们上面这个 onceClick 指令，默认的时间单位时毫秒，假设现在想给时间设置单位，那么我们就可以这样写：

const app = createApp(App);
    
    app.directive('onceClick',{
        mounted(el, binding, vnode) {
            el.addEventListener('click', () => {
                if (!el.disabled) {
                    el.disabled = true;
                    let time = binding.value;
                    if (binding.arg == "s") {
                        time = time * 1000;
                    }
                    setTimeout(() => {
                        el.disabled = false;
                    }, time);
                }
            });
        }
    })

在自定义指令的时候，获取到 binding.arg 的值，这样就可以知道时间单位了，在使用该指令的时候，方式如下：

<button v-onceClick:[timeUnit]="10" @click="btnClick">ClickMe</button>
    <script>
    
        import {ref} from 'vue';
    
        export default {
            name: "MyVue01",
            setup() {
                const timeUnit = ref('s');
                return {timeUnit}
            }
        }
    </script>

timeUnit 是一个提前定义好的变量。

### 3. 自定义权限指令 ###

好啦，有了上面的基础知识，接下来就来看我们本文的主题，自定义权限指令，我写一个简单的例子大家来看下：

const usersPermissions = ['user'];
    
    app.directive('hasPermission', {
        mounted(el, binding, vnode) {
            const {value} = binding;
            let f = usersPermissions.some(p => {
                return p.indexOf(value) !== -1;
            });
            if (!f) {
                el.parentNode && el.parentNode.removeChild(el);
            }
        }
    })

usersPermissions 表示当前用户所具备的权限，正常该数据应该是从服务端加载而来，但是我这里简单起见，就直接定义好了。

具体的逻辑很简单，先从 binding 中提取出 value 的值，这就是当前控件所需要的权限，然后遍历 usersPermissions 用一个 some 函数，去查看 usersPermissions 中是否有满足条件的值，如果没有，说明当前用户不具备展示该组件所需要的权限，那么就要隐藏这个组件，隐藏的方式就是获取到当前组件的父组件，然后从父组件中移除当前组件即可。

这是一个全局的指令，定义好之后，我们就可以在组件中直接使用了：

<button @click="btnClick" v-hasPermission="['user:delete']">删除用户</button>

好啦，Vue3 自定义组件学会了没？

![a91801a6c19b4084ab1793388efaeb5b.jpeg][]

[a91801a6c19b4084ab1793388efaeb5b.jpeg]: https://img-blog.csdnimg.cn/a91801a6c19b4084ab1793388efaeb5b.jpeg