目录 vue @input和@click的区别 @input 一般用于监听事件 @click 事件触发事件 vue中input聚焦及坑 点击按钮,使某个 input 框聚焦 加载页面时自动聚焦 【坑】 vue @input和@click的区别 @input 一般用
目录
- vue @input和@click的区别
- @input 一般用于监听事件
- @click 事件触发事件
- vue中input聚焦及坑
- 点击按钮,使某个 input 框聚焦
- 加载页面时自动聚焦
- 【坑】
vue @input和@click的区别
@input 一般用于监听事件
只要输入的值变化了就会触发input
<input :type="type" :value="value" :placeholder="placeholder" :name="name" @input="$emit('input',$event.target.value)" />
@click 事件触发事件
<input type="text" @click="clickFn">
vue中input聚焦及坑
点击按钮,使某个 input 框聚焦
1、给 input 加个 ref 属性,写个 button 按钮并加个点击事件
<input type="text" ref="input"> <button @click="onFocus"></button>
2、onFocus方法:
onFocus() { this.$refs.input.focus() }
加载页面时自动聚焦
mounted() { this.$nextTick(() => { this.$refs.input.focus() }) },
【坑】
如果input框是隐藏的,点击某个元素让input框显示,同时聚焦,这个时候聚焦效果就不会实现。
解决办法:
点击元素的时候用个变量做标识,然后再watch里面去监听这个变量,通过判断这个变量的值来聚焦,
可以写在setTimeout里面,或者写在nextTick里面即可解决问题;代码如下
watch: { isClick(){ if(this.isClick == false) { setTimeout(() => { this.$refs.input.focus() }, 100); // this.$nextTick(() => { // this.$refs.input.focus() // }); } } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持易盾网络。