封装自动获取焦点插件

&小胖&

于 2021-11-14 12:43:21 发布

阅读量526

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/a2739294436/article/details/121316251

版权

这篇博客介绍了如何在Vue.js中创建一个名为`v-focus`的自定义指令，该指令使得元素（如input或textarea）在页面加载时自动获得焦点。通过在main.js中注册并应用到特定输入元素，可以轻松实现页面焦点控制。这对于提升用户体验尤其有用。

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

封装插件

import Vue from 'vue'

// 聚焦指令
Vue.directive('focus', {
  // 第一次
  inserted (e) {
    focus(e)
  },
  // 除第一次以外
  update (e) {
    focus(e)
  }
})

function focus (e) {
  if (['INPUT', 'TEXTAREA'].indexOf(e.tagName) !== -1) {
    e.focus()
  } else {
    let node = e.querySelector('input')
    if (node) {
      node.focus()
      return
    }
    node = e.querySelector('textarea')
    if (node) {
      node.focus()
      return
    }
    // 抛出错误
    throw new Error('请把focus指令用在input或textarea上')
  }
}

在main.js注册

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 引入插件
import '../directive/focus'
new Vue({
  render: h => h(App),
}).$mount('#app')

使用 v-focus