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=truesetTimeout(()=>{
    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>