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

会飞的鱼先生2025-05-28 19:59

v-focus

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

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

ts 复制代码

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并注册指令。

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 组件中中使用

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>