vue 中自定义指令改变data中的值

通过局部自定义指令实现了一个拖动的指令

html:

<div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div>

script:

methods:{

set(x,y){

this.data.x=x;

this.data.y=y;

}

},

directives:{

// 拖动的自定义指令

drag(el,binding){

//el为拖动的元素

var oDiv =el;
 oDiv.onmousedown = function(e){
   e.preventDefault();
          e.stopPropagation();
   var disX = e.offsetX;
   var disY = e.offsetY;
   document.onmousemove = function(e){
    e.preventDefault();
e.stopPropagation();
    var x=e.pageX-disX;
    var y=e.pageY-disY

    oDiv.style.left=x

oDiv.style.top=y

    // 通过传参的形式，将methods中的函数传进来，以此来改变data中的值
   binding.value.set(x,y)
   };
   document.onmouseup = function(){
    document.οnmοusemοve=null;
    document.οnmοuseup=null;
   };
 };
}
},