Vue 中使用input和el-input自动获取焦点的问题

Vue 中使用input和el-input自动获取焦点

在vue中，普通<input />和<el-input></el-input>自动获取焦点可以使用自定义指令来实现。

一、普通<input>的自定义命令使用方法

1、先在入口文件中注册一个全局自定义指令

// main.js
Vue.directive('focus', {
  // 当被绑定的原色插入到DOM中时
  inserted (el, binding, vnode) {
    // 聚焦元素
    el.focus()
  }
})

语法格式：Vue.directive(’ 自定义指令名称 '，{ } )

2、在组件中使用（v- + 指令名）

// index.vue
<input v-focus placeholder="我有自定义的v-focus,所以我聚焦了" />

3、效果实现

二、<el-input>的自定义指令使用方法

1、和普通的输入框用法一样

// main.js
Vue.directive('fo', {
  inserted (el, binding, vnode) {
    // 聚焦元素
    el.querySelector('input').focus()
  }
})

注：el-input在页面渲染后，外层是个div，需要拿到里面的input才会有效果

2、在组件中使用（v- + 指令名）

// index.vue
<el-input v-fo placeholder="我有v-fo,所以我可以自动聚焦"></el-input>

3、实现效果

小试牛刀，不喜勿喷。