快速解决元素的自动对焦失效问题

<强>原因:

自动对焦是vue中输入的原生属性,元素也支持这种方法,

但是元素中的el-input组件外面还有其他组件,导致自动对焦失效,只能手动调用焦点方法来聚集。

<>强绑定ref

　　

& lt; el-input ref=v模型“myNameId”=癴orm.name”/祝辞

　　

。美元refs.myNameId.focus ();

　　 　　

<强>动态绑定ref

　　 　　 　　& lt; el-input: ref=薄笆淙搿?形式。id form.name“v模型=/比; 　　 　　美元。nextTick(()=祝辞{ 　　让id=笆淙搿? this.form.id; 　　美元。参考文献[id] .focus (); 　　}) 　　之前 　　 　　

<强>元素输入输入框自动获取焦点

　　

最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的焦点状态。

　　

但是,元素并不支持自动对焦属性,那就只能通过原生的js效果获取聚焦效果了

　　

　　

. getelementbyid(“输入”).focus ();

　　 　　

或者利用vue的ref属性也可以实现聚焦效果:

　　

原理其实很简单,元素已经提供了关注方法,但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性,然后在需要的地方直接调用方法就可以了

　　

　　

& lt; el-input v模型=笆淙搿闭嘉环?扒胧淙肽谌荨皉ef=笆淙搿弊４? lt;/el-input>

　　 　　 　　 　　美元。nextTick(()=比;{ 　　refs.input.focus美元。() 　　}) 　　 　　

注意:一个页面只能有一个聚焦效果

　　

最后,vue也支持自定义指令

　　

当页面加载时,该元素将获得焦点(注意:自动对焦在移动版Safari浏览器上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:

　　 　　//注册一个全局自定义指令“v-focus” 　　Vue。指令(“焦点”,{//当被绑定的元素插入到DOM中时…… 　　插入:函数(el) {//聚焦元素 　　el.focus ()//element-ui 　　el.children [0] .focus ()//元素有变化,如显示或者父元素变化可以加延时或判断 　　setTimeout(_=比;{ 　　el.children [0] .focus () 　　}) 　　} 　　}) 　　 　　

以上这篇快速解决元素的自动对焦失效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

快速解决元素的自动对焦失效问题