vue3自定义指令来实现 v-focus 功能

v-focus

在 Vue 3 中，可以通过自定义指令来实现v-focus 功能

• 新建一个名为 focus.ts 的文件，在其中定义一个名为 focus 的自定义指令。

import type { Directive ,App} from 'vue'const vFocus: Directive = {// 当元素插入到 DOM 后，自动聚焦mounted(el: HTMLElement) {console.log(el,'el');el.focus && el.focus()},// 当指令绑定的值更新时，重新聚焦updated(el: HTMLElement) {el.focus && el.focus()},
}
export const setupFocusDirective = (app: App<Element>) => {app.directive('focus', vFocus)
}
export default vFocus

• 在 main.ts 中导入directive/index.ts并注册指令。

// directive/index.ts
import type { App } from 'vue'
import {setupFocusDirective} from './focus'
/*** 导出指令：v-xxx* @methods focus 聚焦元素，用法: v-focus="xxx"*/
export const setupPermission = (app: App<Element>) => {setupFocusDirective(app)
}

• vue 组件中中使用

<script setup lang="ts">import {ref} from "vue";import { ElInput } from 'element-plus'const value = ref<string>('我是要复制的值')
</script><template><input v-model="value" placeholder="111" v-focus />
</template>