VUE不仅为我们提供了自定义组件，还提供了自定义指令。当然，这个玩意我在VUE2中是没有用到过的。
VUE3中我大概试一下这个自定义指令：
官方文档：
一：注册全局指令
在main.ts中加入如下配置：
// ======================================================= // 注册一个全局自定义指令 `v-focus` app.directive('console', { // 当被绑定的元素插入到 DOM 中时…… mounted(el) { // Focus the element // el.focus() console.log('自定义全局指令v-console 注册成功'); } })
二：注册局部指令
在某个页面的js中：
name: "index", components: {}, /** * @name: 自定义指令（局部注册） * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-02-25 */ directives: { // v-part part: { // 指令的定义 mounted(el: any) { // el.focus() console.log(el); console.log('自定义局部指令注册成功！'); } } },
三：v-preventReClick，防止多次点击，重复请求
name: "index", components: { }, /** * @name: 自定义指令（局部注册） * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-02-25 */ directives: { // v-part preventReClick: { // 指令的定义 mounted(el: any, binding:any) { // el.focus() console.log(el); console.log(binding); // console.log('自定义局部指令注册成功！'); el.addEventListener('click', () => { if (!el.disabled) { console.log(123); el.disabled = true; setTimeout(() => { el.disabled = false; }, binding.value || 300); } }); } } },
四：调用方式
<button @click="handle" v-preventReClick>提交</button>
以上大概就是VUE3中自定义指令的大概使用。
