vue3 使用自定义指令，全局注册，局部注册

vue3 使用自定义指令，全局注册，局部注册

必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。

demo1: 局部注册自定义指令，实现输入框自动获取焦点

<template>
 <h3>自定义指令</h3> <br>
 <input v-focus value="我是input输入框" id="hh"/>   
</template>
<script lang="ts" setup>
    import {
    
    ref, reactive, nextTick} from 'vue'
     //自定义指令
    const vFocus = {
    
     //必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。
        beforeMount: (el) => {
    
    
       // beforeUpdate: (el) => {
    
     //需要实时更新的时候用
            // 在元素上做些操作
            console.log(el);
            console.log(el.value);
            nextTick(()=>{
    
    
                el.focus(); //获取焦点
            })
        }
    }
</script>

demo2: 全局注册自定义指令，实现防止按钮连续重复点击事件（防抖）

src/directive/index.ts

export default {
    
    
    //自定义节流操作
    preventReClick:{
    
    
        mounted(el:any,binding:any){
    
    
            el.addEventListener('click',()=>{
    
    
                if(!el.disabled){
    
    
                    el.disabled=true
                    setTimeout(()=>{
    
    
                        el.disabled=false
                    },binding.value||2000)
                }
            })
        }
    }
}

main.ts

import dir from './directive/index'
app.directive('preventReClick', dir.preventReClick);

.vue使用（500为定义的节流的时间，若不写，则为默认的2000ms）

<button v-preventReClick="500">stopreclick</button>