Vue高级语法-自定义指令

需求：输入框自动获取焦点，输入框输入v-focus即可获取焦点

方案一：局部指令option语法

//App.vue
<template>
  <div class="app" >
    <input type="text"  v-focus />
  </div>
</template>
​
<script>
export default {
  name: 'App',
  directives: {
    focus: {
      //生命周期函数
      mounted(el) {
        console.log("v-focus应用的元素被挂载了")
        el?.focus()
      }
    }
}
}
</script>

方案二：setup语法

//App.vue
<template>
  <div class="app" >
    <input type="text"  v-focus />
  </div>
</template>
​
<script setup>
  //必须v开头定义名称
 const vFocus = {
   mounted(el){
     el?.focus()
   }
 }
</script>

方案三：全局指令-普通版本

//main.js
import { createApp } from 'vue'
import App from './01_自定义指令/App.vue'
import useDirectives from "./01_自定义指令/directives/index"
​
const app = createApp(App)
//挂载指令
app.directive("focus",{
  //监听生命周期
     mounted(el){
         el?.focus()
    }
})
app.mount('#app')

方案四：封装版本

​
import { createApp } from 'vue'
import App from './01_自定义指令/App.vue'
import useDirectives from "./01_自定义指令/directives/index"
​
useDirectives(app)
app.mount('#app')

// focus.js
export default function directiveFocus(app) {
    app.directive("focus",{
        mounted(el){
            el?.focus()
        }
    })
}

import  directiveFocus from './focus';
​
export default function useDirectives(app) {
    directiveFocus(app)
}

定义directives目录用于管理指令集，新增focus.js(定义指令) 和index.js（统一管理指令）

方案五：普通方法

import {ref, onMounted} from "vue";
​
export default function useInput() {
​
    const  inputRef = ref();
    onMounted(() => {
        inputRef.value?.focus()
    })
}
​

<template>
  <div class="app" >
    <input type="text"  ref="inputRef" />
  </div>
</template>
​
<script setup>
  import {onMounted, ref} from "vue";
​
  const inputRef=ref()
  onMounted (() => {
    inputRef?.value.focus()
  })
</script>