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

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>
相关推荐
西洼工作室2 小时前
CSS高效开发三大方向
前端·css
昔人'2 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾3 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
sniper_fandc4 小时前
Axios快速上手
vue.js·axios
哟哟耶耶4 小时前
Starting again-02
开发语言·前端·javascript
Apifox.4 小时前
Apifox 9 月更新| AI 生成接口测试用例、在线文档调试能力全面升级、内置更多 HTTP 状态码、支持将目录转换为模块
前端·人工智能·后端·http·ai·测试用例·postman
Kitasan Burakku5 小时前
Typescript return type
前端·javascript·typescript
叁佰万5 小时前
前端实战开发(一):从参数优化到布局通信的全流程解决方案
前端
笔尖的记忆5 小时前
js异步任务你都知道了吗?
前端·面试
光影少年5 小时前
react生态
前端·react.js·前端框架