自定义vue指令

1.自定义折叠板指令

Vue.directive('collapse',{
 inserted(el){
 	//.collaps-toggle{
 	//	overflow:hidden;
 	//	overflow-x:auto;
 	//	-ms-overflow-style:none;
 	//	transition:height .3s;
 	//}
	el.className = 'collaps-toggle';
	if(el.childNodes.length!==1){
		throw Error('只能包含一个子元素')
   },
   update(el,{value}){
	if(value.toggle){
		Vue.nextTick(()=>{
		const h = el.childNodes[0].getBoundingClientRect().height;
		el.dataset.isinit='true';
		el.style.height=h+'px';	
})
}else{
	if(el.dataset.isinit){
		el.style.height=0;
		return;
}
Vue.nextTick(()=>{
	el.style.height = el.childNodes[0].getBUoundingClientRect().height+'px';
	requestAnimationFrame(()=> el.style.height=0)
})
}

}
   
   
}
})

2.el-dialog 弹窗拖动

vue.directive('drag',{
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector(.el-dialog);
dialogHeaderEl.style.cursor = 'move';
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom,null);
dialogHeaderEl.onmousedown=(e)=>{
	const disX=e.clientX-dialogHeaderEl.offsetLeft;
	const disY=e.clientX-dialogHeaderEl.offsetTop;
	let styL,styT;
	if(sty.left.includes('%')){
	styL = +sty.left.replace(/\px/g,'');
	styT=+sty.top.replace(/\px/g,'');
}
document.onmusemove = function(e){
const l=e.clientX-disX;
const t = e.clienY-disY;
dragDom.style.left = `${l+styL}px`;
dragDom.style.top = `${t+styL}px`;

}
document.onmouseup = function(e){
	document.onmousemove = null;
	document.onmouseup=null;
}
	
}
})