上集回顾: 增加了按下tab键跳过button的功能( 原理是对应的标签上加上 tabindex="-1" )
问题: el-input el-button都没问题,到了el-checkbox这里,发现没有效果。
思路: 去页面实验后发现,是在el-checkbox里面的input 还是会停下,并且相关的span 获得了 is-focus。但如果给这个input设置了tabindex=‘-1‘ 就没问题了。
’所以我要给el-checkbox里面的input增加。
我的checkbox增加的条件是遍历timeBox的数组增加。所以是用watch监听timeBoxList。若长度增加。则用ref+dom增加tabindex属性。
<el-checkbox
:checked="true"
:ref="item+'check'"
@change="checkBox($event,index)"
>参与计算</el-checkbox>
watch: {
timeboxList(val, old) {
let item = val[val.length - 1];
this.$nextTick(() => {
this.addTabindex(item);
});
}
},
addTabindex(item) {
this.$refs[item + "check"][0].$el
.getElementsByTagName("input")[0]
.setAttribute("tabindex", "-1");
},
注意,一定要用$nextTick。
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。
0人点赞