今天看到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");
}
}
},