vue中怎么通过自定义指令改变data中的值

vue中怎么通过自定义指令改变data中的值,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

十余年建站经验, 成都网站建设、网站设计客户的见证与正确选择。创新互联公司提供完善的营销型网页建站明细报价表。后期开发更加便捷高效,我们致力于追求更美、更快、更规范。

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

html:

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.onmousemove=null;
  document.onmouseup=null;
  };
 };
}
},

关于vue中怎么通过自定义指令改变data中的值问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


网站栏目:vue中怎么通过自定义指令改变data中的值
文章来源:http://csruizhi.cn/article/jshgjp.html

其他资讯

Copyright © 2007-2024 成都优众联杰科技有限公司 All Rights Reserved 蜀ICP备2024116266号
友情链接: 营销型网站建设 成都响应式网站建设 高端定制网站设计 高端网站设计 温江网站设计 四川成都网站制作 外贸网站设计方案 成都营销网站建设 成都网站设计 成都网站设计 成都网站设计 网站建设公司 教育网站设计方案 成都网站制作 LED网站设计方案 网站设计制作 成都网站建设公司 成都网站建设公司 企业网站设计 网站设计 成都网站设计公司 上市集团网站建设