1.定义自定义指令:
app.directive('pos',{mounted(el,bunding){el.style[bunding.arg] = bunding.value + 'px';}, updated(el,bunding){el.style[bunding.arg] = bunding.value + 'px';}
})
app.directive('指令名',{
mounted(el,bunding){},
updated(el,bunding){}
})
如果只有mounted和updated这两个钩子函数,并且这两个钩子执行一样的内容,可以简写成如下:
app.directive('pos',(el,bunding)=>{el.style[bunding.arg] = bunding.value + 'px';
})
app.directive('指令名',fn(el,bunding))
参数el和bunding:
el ---- 挂载的元素
bunding.arg ---- 绑定的属性
bunding.value ---- 绑定的属性值
2.在template中使用自定义指令:v-指令名
template: `<input class='header' v-pos:left='distance' />`
bunding.arg ---- 对应left
bunding.value ---- 对应distance