Vue封装自定义指令focus

最新推荐文章于 2025-05-07 22:07:45 发布

原创最新推荐文章于 2025-05-07 22:07:45 发布 · 586 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #es6

vueutils工具专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue中封装一个自定义指令`focus`，用于自动获取输入框焦点。通过Vue插件开发方式，提供两种实现：一是传入带有`install`方法的对象进行全局注册；二是直接传入函数体。实现代码包含在`directives.js`文件中，并在`main.js`中引入并全局注册。

Vue封装自定义指令focus

功能: 自动获取输入框焦点

方式: 采用Vue插件开发方式

方式1: 传入对象(带install方法) - 给Vue添加全局的东西(Vue插入插件)

方式2: 传入函数体

代码实现:

第一步:在utils文件夹下新建directives.js文件

import Vue from 'vue'
const obj = {
  install () {
    // Vue.prototype.$属性 = 值
    // 全局自定义指令
    Vue.directive('focus', {
      // v-focus标签被插入到真实DOM上,此方法才会执行
      inserted (el) { // el:指令所在的原生标签
        if (el.nadeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
          el.focus()
        } else {
          // 如果不是原生的标签在获取一下内部input
          const inp = el.querySelector('input')
          const area = el.querySelector('textarea')
          if (inp.nodeName === 'INPUT' || area.nadeName === 'TEXTAREA') {
            if (inp.nodeName === 'INPUT') {
              inp.focus()
            } else {
              area.focus()
            }
          } else {
            console.error('指令请在输入框上使用')
          }
        }
      }
    })
  }
}
export default obj

使用: main.js文件引入全局注册

import directive from '@/utils/directives'
Vue.use(directive)