Vue3 中自定义指令（一）

　　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 中，也可以这样写：

　　这里我自定义了一个名叫 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 以及这里的参数都是咋回事，那么接下来松哥就来和大家详细介绍一下这些方法和参数。

　　更多关于“Java培训”的问题，欢迎咨询千锋教育在线名师。千锋已有十余年的培训经验，课程大纲更科学更专业，有针对零基础的就业班，有针对想提升技术的好程序员班，高品质课程助力你实现java程序员梦想。