快速解决element的autofocus失效问题
原因：input标签placeholder属性
autofocus是vue中input的原⽣属性,element也⽀持这种⽅法,
但是element中的el-input组件外⾯还有其他组件, 导致autofocus失效, 只能⼿动调⽤focus⽅法来聚集。
⽅法：
绑定ref
<el-input ref="myNameId" v-model="form.name" />
this.$NameId.focus();
动态绑定ref
<el-input :ref=" 'input'+ form.id " v-model="form.name" />
this.$nextTick(()=>{
let id = 'input'+this.form.id;
this.$refs[id].focus();
})
补充知识：element input输⼊框⾃动获取焦点
最近项⽬中在做表单的时候，需要⾃动滚动到评论框，并且让评论框⾃动聚焦，这就需要⼿动触发输⼊框的 focus 状态。
但是，element并不⽀持autofocus属性，那就只能通过原⽣的js效果获取聚焦效果了
或者利⽤vue的ref属性也可以实现聚焦效果：
原理其实很简单，Element 已经提供了 focus ⽅法，但是⽂档并没有写明如何去调⽤，下⾯是在el-input标签上加⼊ref属性，然后在需要的地⽅直接调⽤⽅法就可以了
<el-input v-model="input" placeholder="请输⼊内容" ref="input"></el-input>
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失效问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。