通過局部自定義指令實現了一個拖動的指令

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=xoDiv.style.top=y  // 通過傳參的形式，將methods中的函數傳進來，以此來改變data中的值  binding.value.set(x,y)  };  document.onmouseup = function(){  document.onmousemove=null;  document.onmouseup=null;  }; };}},

以上所述是小編給大家介紹的vue 中自定義指令改變data中的值，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！