时间计算器进化史4--------给el-checkbox增加tabindex 优化版

今天看到vue的自定义指令

directives:{
    xxx:{  //指令名，属性是指令选项
        bind:function(){},    //第一次绑定到元素时，（可用来做初始化）
        inserted:function(){},    //被绑定的元素插入父节点时
        update:function(){},    //元素所在的莫干更新时调用，不用管值是否变化
        componentUpdated:function(){},    //绑定元素所在模板完成一次更新周期是调用
        unbind:function(){}    //指令与元素解绑时调用？？？？？还不知道如何指令解绑
    }
}

上面时间节点都会有些参数，比如
el
binding
    name   指令名（不包含v-）
    value  绑定值（若绑定值是个计算表达式，则value是结果不是式子）
    oldValue  指令绑定的前一个值，update和componentUpdated中可用
    expression    value是计算后，expression是计算式子的字符串形式
    arg    传给指令的参数
    modifiers    作用在指令上的修饰符
vnode
oldVnode
等。

之前增加tabindex是用watch监听 列表的变化，还需要判断是增加或者减少，增加需要追加属性，减少不需要。还需要根据列表的index，获取到对应的ref属性，再去获得对应的el进行修改。

现在只需要用insert  和  el 的结合，就可以解决。

<el-checkbox :checked="true" 
             :ref="item.id+'check'" 
             @change="checkBox($event,index)" 
             v-addTab='true'>参与计算
</el-checkbox>

directives:{
    addTab:{
      inserted:function(el){
        el.getElementsByTagName("input")[0]
        .setAttribute("tabindex", "-1");
      }
    }
  },