Vue自定义指令实战：拖拽与图片加载优化

 <div v-drag>我可以拖拽</div>

Vue.directive('drag', 
 inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略
  let oDiv=el; //el --> 触发的DOM元素
  oDiv.onmousedown=function(e){
    let l=e.clientX-oDiv.offsetLeft;
    let t=e.clientY-oDiv.offsetTop;
    document.onmousemove=function(e){
      oDiv.style.left=e.clientX-l+'px';
      oDiv.style.top=e.clientY-t+'px';
    };
    oDiv.onmouseup=function(){
      document.onmousemove=null;
      oDiv.onmouseup=null;
    }
  }
})

export default function(el){
  let oDiv=el;
  oDiv.onmousedown=function(e){
    let l=e.clientX-oDiv.offsetLeft;
    let t=e.clientY-oDiv.offsetTop;
    document.onmousemove=function(e){
      oDiv.style.left=e.clientX-l+'px';
      oDiv.style.top=e.clientY-t+'px';
    };
    oDiv.onmouseup=function(){
      document.onmousemove=null;
      oDiv.onmouseup=null;
    }
  }
}

import drag from 'drag.js'
Vue.directive('drag',drag)

<div v-drag>我可以拖拽</div>

  <img v-imgUrl="url"></img> //参数不可以直接填写url地址

  data () {
    url:'src/assets/logo.png'
  }

  Vue.directive('imgUrl',function(el,binding){
    var color=Math.floor(Math.random()*1000000);//设置随机颜色
    el.style.backgroundColor='#'+color;

    var img=new Image();
    img.src=binding.value;// -->binding.value指的是指令后的参数
    img.onload=function(){
      el.style.backgroundColor='';
      el.src=binding.value;      
    }
  })