vue3 （六）自定义指令

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