经常要用到,干脆就整理一下咯。
第一种方法:
从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。
运行结果:
嗯。。。。到这里就结束了。两种方法喜欢哪种用哪种了。
感觉有不错的,给个关注支持咯,下次更新更多知识。
------努力努力再努力。