Vue Element <el-input> 标签的多次获取焦点问题(兼容火狐 , 谷歌浏览器)

我是新人,在前段这个行业一年多了。浑浑噩噩过来,感觉总是缺点什么。发布点我遇到的坑(算是自己的经验累积 ,是我的第一篇 。帮别人是幸福的吧)

(1)

单一 的重复获取焦点
<el-input

  placeholder="请输入内容"

ref="InputWarp"

  v-model="input"

  clearable>

</el-input>

<el-row>

  <el-button  @click="handler">默认按钮</el-button>

</el-row>

<script>

  export default {

    data() {

      return {

        input: ''

      },

methods:{

handler(){

setTimeout(()=>{

this.$refs.InputWarp.focus();

},10)

}

}  }

  }

</script>

(2) 远程搜索下拉 选择后再次将光标聚焦到input 内部

<template>

<el-autocomplete

  v-model="state"

ref="test"

  :fetch-suggestions="querySearchAsync"

  placeholder="请输入内容"

  @select="handleSelect"

@blur="handleBlur"

>

<div @mouseover="handshow = true" @mouseleave="handshow = false">{{ item.label }}</div>

</el-autocomplete>

</template>

<script>

  export default {

    data() {

      return {

handshow :false,//鼠标是否移动在下拉区域

        cities: [{

          value: 'Beijing',

          label: '北京'

        }, {

          value: 'Shanghai',

          label: '上海'

        }, {

          value: 'Nanjing',

          label: '南京'

        }, {

          value: 'Chengdu',

          label: '成都'

        }, {

          value: 'Shenzhen',

          label: '深圳'

        }, {

          value: 'Guangzhou',

          label: '广州'

        }],

        value: ''

      },

methods: {

querySearchAsync(string, cb){//input 获取焦点触发的事件(内容发生变化触发)

},

handleSelect(){//点击下拉选项 (选中下拉选项)

},

handleBlur(){(失去焦点时触发)

if(!this.handshow){


}else{

this.handshow = false;

setTimeout(()=>{

this.$refs.test.focus()

},10)

}

}

}

    }

  }

</script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容