vue点击按钮 使input textarea等输入框自动聚焦
第一种方法:使用vue 的实例属性$ref
·
经常要用到,干脆就整理一下咯。
第一种方法:
从vue 的实例属性$ref去调input的focus方法使其实现聚焦。
<template>
<div class="box">
<input type="text" ref="ipt">
<br>
<button @click="btn">点击使input聚焦</button>
</div>
</template>
<script >
export default{
data(){
return{}
},
created(){},
methods:{
btn(){
this.$refs.ipt.focus()
}
}
}
</script>
当点击聚焦按钮时,使其上面的input 框实现聚焦。
第二种方法:
利用vue的自定义指令与指令v-focus进行监听实现。
<template>
<div class="box">
<input type="text" ref="ipt" v-focus="statefocus" @blur="b">
<br>
<button @click="btn">点击使input聚焦</button>
</div>
</template>
<script >
export default{
data(){
return{statefocus:false}
},
methods:{
btn(){
this.statefocus = true;
},
b(){
this.statefocus = false;
}
},
directives:{
Focus:{
update:function(el,{value}){
if(value){ // if(true)就聚焦
el.focus();
}
}
}
}
}
</script>
当点击按钮状态为true就会聚焦。失焦时把状态重置为false。
运行结果:
嗯。。。。到这里就结束了。两种方法喜欢哪种用哪种了。
感觉有不错的,给个关注支持咯,下次更新更多知识。
------努力努力再努力。
更多推荐
已为社区贡献2条内容
所有评论(0)