共计 4182 个字符,预计需要花费 11 分钟才能阅读完成。
@[toc]
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 自定义组件学会了没?松哥在最近的 TienChin 我的项目视频中也会和大家分享这块的内容,敬请期待。