时间计算器进化史2--------给el-checkbox增加tabindex

上集回顾： 增加了按下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人点赞

 

随笔