详解vue3自定义指令实现 v-focus 功能
作者：会飞的鱼先生
在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>到此这篇关于vue3自定义指令来实现 v-focus 功能的文章就介绍到这了,更多相关vue自定义指令 v-focus内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！