快速解决element的autofocus失效问题

原因：

autofocus是vue中input的原⽣属性,element也⽀持这种⽅法,

但是element中的el-input组件外⾯还有其他组件, 导致autofocus失效, 只能⼿动调⽤focus⽅法来聚集。⽅法：绑定ref

this.$refs.myNameId.focus();动态绑定ref

this.$nextTick(()=>{

let id = 'input'+this.form.id; this.$refs[id].focus();})

补充知识：element input输⼊框⾃动获取焦点

最近项⽬中在做表单的时候，需要⾃动滚动到评论框，并且让评论框⾃动聚焦，这就需要⼿动触发输⼊框的 focus 状态。但是，element并不⽀持autofocus属性，那就只能通过原⽣的js效果获取聚焦效果了

document.getElementById(\"input\").focus();或者利⽤vue的ref属性也可以实现聚焦效果：

原理其实很简单，Element 已经提供了 focus ⽅法，但是⽂档并没有写明如何去调⽤,下⾯是在el-input标签上加⼊ref属性，然后在需要的地⽅直接调⽤⽅法就可以了

this.$nextTick(() => { this.$refs.input.focus() })

注意：⼀个页⾯只能有⼀个聚焦效果last , vue也⽀持⾃定义指令

当页⾯加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不⼯作)。事实上，只要你在打开这个页⾯后还没点击过任何内容，这个输⼊框就应当还是处于聚焦状态。现在让我们⽤指令来实现这个功能：

// 注册⼀个全局⾃定义指令 `v-focus`Vue.directive('focus', {

// 当被绑定的元素插⼊到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() // element-ui

el.children[0].focus()

// 元素有变化，如show或者⽗元素变化可以加延时或判断 setTimeout(_ => { el.children[0].focus() }) }})

以上这篇快速解决element的autofocus失效问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。