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 分钟前
Cursor 提示"Too Many Accounts"?一行命令重置机器码
前端·javascript·后端
前端付豪26 分钟前
Vue3 响应式来!
前端·javascript·vue.js
芝士麻雀27 分钟前
Zustand 深度解析:原理、源码与最佳实践
前端·react.js·前端框架
Dontla33 分钟前
JS睡眠函数(JS sleep()函数、JS单线程、Event Loop事件循环)假睡眠
开发语言·javascript·ecmascript
fruge40 分钟前
前端性能优化实战指南:从首屏加载到用户体验的全面提升
前端·性能优化·ux
ZYMFZ1 小时前
Redis主从复制与哨兵集群
前端·git·github
lumi.1 小时前
前端本地存储技术笔记:localStorage 与 sessionStorage 详解
前端·javascript·笔记
旧雨散尘1 小时前
【react】初学react5-react脚手架搭建中的小众知识
前端·react.js·前端框架
炫饭第一名1 小时前
🌍🌍🌍字节一面场景题:异步任务调度器
前端·javascript·面试
烛阴1 小时前
Lua字符串的利刃:模式匹配的艺术与实践
前端·lua