Vue3自定义指令用法

一、自定义指令分为全局和局部

1. 局部自定义指令,使用小驼峰命名

<template>
  <div class="home">
    <input  ref="testRef" v-focus/>
    <div  v-test >Click打印</div>
  </div>
</template>
<script lang="ts" setup>
import { ref ,onMounted} from 'vue'

//泛型
let testRef = ref< HTMLElement| null |string>(null)
const vFocus = {
  mounted(el:HTMLElement) {
    el.focus();
  },
}
const vTest = {
  mounted(el:HTMLElement) {
    el.addEventListener('click',()=>{
      console.log('测试');
    })
  },
}
</script>

2. 全局自定义指令

//main.ts下
app.directive('focus',{
    mounted(el:HTMLElement){
        el.focus();
    }
})