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