Vue3.x的自定义指令

原创于 2022-02-11 10:27:36 发布 · 629 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在Vue3.x中创建全局和局部自定义指令，以实现input元素自动获取焦点的功能。通过`app.directive`注册全局指令，并在模板中使用`v-focus`，而在组件内则通过`directives`选项注册局部指令`v-focustt`来达到相同效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3.x的自定义指令

以input获取焦点为例

定义全局自定义指令

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.directive('focus', {
    mounted(el) {
        el.focus()
    }
})
app.mount('#app')

使用全局自定义指令

<input v-focus />

注册局部自定义指令

export default {
	directives:{
    focustt: {
      mounted(el) {
        // console.log(el.focus, 'elel')
        el.focus()
      }
    }
  },
}

使用局部自定义指令

<input v-focustt />

ok啦啦啦