Vue自定义指令

全局指令和局部指令

Vue.directive('style',{
		bind(el){
			// el表示插入时对应的元素
		}
	})

Vue.directive('style',function(el,binding){
        // 也可以写成回调函数的形式
	})

使用自定义指令完成拖拽效果

    <div id="app">
		<div  v-style v-move></div>
	</div>

    Vue.directive('style',{
			bind(el){
				el.style.width = '200' +'px'
				el.style.height =  '200' +'px'
				el.style.background = 'red'
				// el.style.position = 'absolute'
				// el.style.left = '0'
				// el.style.top = '0'
				el.style.transform = 'translate(0,0)'
			}
		})
		Vue.directive('move',function(el){
			el.onmousedown = function (){
				// alert(1)
				document.onmousemove = function (e){
					let x = e.clientX - el.offsetWidth
					let y = e.clientY - el.offsetHeight

					el.style.transform = "translate("+x+"px,"+y+"px)"
				}
			}
			document.onmouseup = function (){
				document.onmousemove = null
			}
		})
		new Vue({
			el: '#app'
		})
	

局部自定义指令

        new Vue({
			el: '#app',
			directives:{
			    name(el,binding){
			        
			    }
			}
		})
		// 局部自定义指令写在Vue实例中即可