【Vue】vue当中如何通过一个点击事件使一个input显示的同时获取焦点

1、vue当中如何通过一个点击事件使一个input显示的同时获取焦点
2、如何在使用blur()事件取消这个焦点 （ios是好的，但是安卓点击其他位置不取消焦点）

针对获取焦点的问题：
1、autofocus 好使但是仅仅是第一个好使，其他的就不能用了
2、directives: {

focus: {
inserted(el, { value }) {
if (value) {
el.focus();
}
},
},

},

<input type="number" ref="input" v-focus="focusStatus" autofocus="autofocus" v-model="goods.price" @blur="changePrice">
拓展它的focus
通过点击事件让focusStatus变成true也不好使

3、this.$refs.input.focus();同样不好使

所以就不知道怎么办了
我是通过vue-cli初始化的项目

【Vue】vue当中如何通过一个点击事件使一个input显示的同时获取焦点
【Vue】vue当中如何通过一个点击事件使一个input显示的同时获取焦点

如上图所示，点击图二变成图一所示，在图一所示的input框显示的同时进行聚焦，这个解决一下午了实在是做不了。

还有一个问题是图一有焦点的时候安卓点击空白区域，焦点不消失怎么办？ios是好的。

希望有经验的给解决一下~~万分感谢~！

回答

用$nextTick呀，不管你是用v-if还是v-show，dom要渲染之后才能focus，在本次dom渲染之后在nextTick里，dom一定可用，然后el.focus()就可以

===补充===

官方自定义指令就是autofocus的例子
vuejs.org/v2/guide/custom-directive.html" rel="nofollow noreferrer">https://cn.vuejs.org/v2/guide...
我单独写的一个
https://jsfiddle.net/fa3f7hgL/

加个指令，指令里面绑定事件

以上是 【Vue】vue当中如何通过一个点击事件使一个input显示的同时获取焦点 的全部内容， 来源链接： utcz.com/a/77093.html

回到顶部