vue element.ui 表单组件如何自动聚焦

Question

理想效果是全键盘式操作，所以需要打开弹窗时，焦点自动聚焦在弹窗中的表单组件上
尝试过.focus()事件，onfocus属性，autofocus等方法，都没有成功，可能和element.ui的组件封装有关系，望大神能回答一下，谢谢了

Answer 1

 mounted(){
     let inputelement=document.getElementById('user')
     inputelement.focus()
   }

给你的要聚焦el-input加一个id，假设是id为user，然后在mounted中写上面的代码就自动获得焦点，已经测试可行

Answer 2

<el-input v-model="form.site" ref="siteInput" auto-complete="off" placeholder="请输入网址" ></el-input>

所以需要打开弹窗时,跟上如下代码。

  self.$nextTick(function(){
       self.$refs['siteInput'].focus();        
  })

Answer 3

https://jsfiddle.net/L8zdcasb/1/

这个同学有没有认真看文档，文档随便搜索一下 focus 都能看到一大堆相关内容

http://element-cn.eleme.io/#/...

Answer 4

现在来回答一下我之前提出的问题，我现在做的项目，常见的一个弹窗，第一个插件通常是input/radio-button/datePicker之类的，如果是用Jquery方式获取元素，那就是写一个id，然后用jquery获取，这个就不过多说了。由于项目需要，我用的是vue 的ref方式，其实和id也差不多，假定ref为dialogItem,一般input的获取方式通常是this.$refs.dialogItem.$refs.input.focus(),radio-button的获取方式是this.$refs.dialogItem.focus(),如果是datePicker，type为date时可以使用键盘方向键操作选择日期，如果type为daterange，就不能用键盘操作，这时候可以直接将焦点定在插件上，但是这样会打开日期选择器，面积太大，会遮挡其他的内容，所以可以将dialog的title用span提出来写，写一个input在span里，将他的opacity设为0，用第一种方式将焦点定在这个input上，但是这样有一个问题是用户在打开弹窗后需要按两下tab键才能将焦点定到页面的第一个插件上，存在一定的问题。如果有其他类型的元素，可以先console一下this.$refs.dialogItem，看看$refs里面有什么，和有没有focus方法。以上的方法都是写在this.$nextTick()里的，dialog的加载有一定的延迟，如果不进行异步操作，则无法选中元素。

Answer 5

原因:<el-input>元素被外层DIV包裹
解决方案:查询<input>子元素再聚焦即可

<el-input v-focus></el-input>
directives: {
  focus: {
    inserted: function (el) {
      el.querySelector('input').focus()
    }
  }
},