vue3的自定义指令 v-focus写法

最新推荐文章于 2024-07-03 12:06:55 发布

岩盐芝士:)

最新推荐文章于 2024-07-03 12:06:55 发布

阅读量1.7k

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_51924709/article/details/124685981

版权

本文记录了从Vue2向Vue3迁移过程中，如何实现一个v-focus自定义指令的示例。在Vue2中，我们可以在`beforeMount`钩子中利用`nextTick`为元素获取焦点。在Vue3的`setup`语法下，依然可以创建本地自定义指令，通过`vNameOfDirective`形式直接在模板中使用。

摘要由CSDN通过智能技术生成

会vue2的不会vue3，上次查找之后，记录一下，

<template>
   <input
            v-focus
            type="text"
          />
</template>


<script  setUp>
const vFocus = {
  //必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。
  beforeMount: (el) => {
    // 在元素上做些操作
    nextTick(() => {
      el.focus() //获取焦点
    })
  }
}
</script>