vue refs 动态给元素添加聚焦
1.我使用回车提交数据,但是我在选择下拉菜单后,虽然提交了请求,但是element ui 的元素会处于聚焦状态你的回车会是的下拉框再次下拉下去(可自行去element select 组件 尝试)于是我就想到解决办法,像在下拉change时间后,转移焦点,将焦点转移到输入框。<el-inputref="input"placeholder="添加日程至“今日日程”,回车即可创建"v-model=
·
1.我使用回车提交数据,但是我在选择下拉菜单后,虽然提交了请求,但是element ui 的元素会处于聚焦状态你的回车会是的下拉框再次下拉下去(可自行去element select 组件 尝试)
于是我就想到解决办法,像在下拉change时间后,转移焦点,将焦点转移到输入框。
<el-input
ref="input"
placeholder="添加日程至“今日日程”,回车即可创建"
v-model="formData.planName"
class="add-input"
@keyup.enter.native="addHandler"
>
<el-select
v-model="formData.urgentLevel"
slot="append"
placeholder="请选择"
@change="selectChange"
>
<div slot="prefix" class="define-prefix">
<div v-for="(item,index) in 3" :key="index+'count'">!</div>
</div>
<el-option label="紧急" value="3"></el-option>
<el-option label="重要" value="2"></el-option>
<el-option label="一般" value="1"></el-option>
</el-select>
</el-input>
//下拉框change事件
selectChange() {
this.$refs.input.focus()
},
然后问题并没有解决,焦点仍旧是在el-select元素上
最终解决是
selectChange() {
this.$nextTick(() => {
this.$refs.input.focus()
})
console.log(this.$refs.input)
},
总结:change事件改变了数据,然后vue是数据驱动渲染dom,而且是异步的,如果想让dom随着数据的变化而改变,那就需要使用vue.$nextTick()去立即获取更新后的dom
更多推荐
已为社区贡献7条内容
所有评论(0)