如何解决如何在Vue.js中的方法内部触发输入焦点事件?
我有一个输入正在使用以下事件:
<b-nput
class="input"
id="link"
v-model="link"
placeholder="link"
@focus="$event.target.select()"
></b-input>
如何在内部使用此@focus="$event.target.select()"
事件:
以上方法复制该值。当用户单击复制时,我需要触发上述选择焦点事件 如何正确实现?
解决方法
添加saved
方法作为焦点事件处理程序:
@focus="saved"
方法:
methods: {
saved(event){ //the event is passed automatically as parameter
event.target.select()
}
}
编辑:
尝试将ref
添加到输入元素
<b-input
ref="input"
class="input"
id="link"
v-model="link"
placeholder="link"
@focus="$event.target.select()"
></b-input>
然后在方法内部以编程方式触发焦点:
methods: {
async copy(s) {
await navigator.clipboard.writeText(s)
this.$refs.input.focus();
...
}
}
,
您可以将$event
引用到saved
方法
<b-nput
class="input"
id="link"
v-model="link"
placeholder="link"
@focus="saved"
></b-input>
methods: {
saved(event){
console.log(event)
}
}
ref-https://vuejs.org/v2/guide/events.html
,为您的输入提供ref
:
<b-input
class="input"
id="link"
v-model="link"
placeholder="link"
ref="theInput"
></b-input>
然后在组件脚本中的任意位置:
this.$refs['theInput'].focus();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。