300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue点击按钮 使input textarea等输入框自动聚焦

vue点击按钮 使input textarea等输入框自动聚焦

时间:2019-10-08 17:48:14

相关推荐

vue点击按钮 使input textarea等输入框自动聚焦

经常要用到,干脆就整理一下咯。

第一种方法:

从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。

运行结果:

嗯。。。。到这里就结束了。两种方法喜欢哪种用哪种了。

感觉有不错的,给个关注支持咯,下次更新更多知识。

------努力努力再努力。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。