蓝狮官网手把手教你在 Vue3 中自定义指令

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

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

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

  1. 成果展示
    我们先来看看实现自定义指令最终的使用方式:

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

  1. 指令基础
    先要和小伙伴们说一下,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 以及这里的参数都是咋回事,那么接下来松哥就来和大家详细介绍一下这些方法和参数。

2.2 七个钩子函数
在 Vue3 中,自定义指令的钩子函数主要有如下七种(这块跟 Vue2 差异较大):

created:在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时,这很有用。
beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用。
mounted:在绑定元素的父组件被挂载后调用,大部分自定义指令都写在这里。
beforeUpdate:在更新包含组件的 VNode 之前调用。
updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmount:在卸载绑定元素的父组件之前调用
unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次。
虽然钩子函数比较多,看着有点唬人,不过我们日常开发中用的最多的其实是 mounted 函数。

0 Comments
Leave a Reply