vue 中自定义指令改变data中的值
来源:互联网 发布:java mysql jdbc 编辑:程序博客网 时间:2024/06/06 06:29
通过局部自定义指令实现了一个拖动的指令
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.onmousemove=null;
document.onmouseup=null;
};
};
}
},
阅读全文
0 0
- vue 中自定义指令改变data中的值
- vue---vue中常用指令,以及如何自定义指令vue.directive进行节点操作?
- vue自定义指令-vue-reclick
- vue 自定义指令
- Vue自定义指令-拖拽
- Vue.js--自定义指令
- Vue自定义指令
- vue自定义指令
- vue自定义指令
- vue之自定义指令
- Vue.js--自定义指令
- vue-自定义指令-拖拽
- 14-Vue自定义指令
- Vue.directive 自定义指令
- Vue自定义指令(directive)
- Vue之自定义指令
- Vue之自定义指令
- Vue.js 自定义指令
- Android之下载与文件
- Python MRO(Method Resolution Order)方法解析顺序
- python将linux系统下的war包自动部署到winserver2008tomcat服务下的自动化脚本
- 面试题10解析—多线程通讯与协作
- HAWQ取代传统数仓实践(十三)——事实表技术之周期快照
- vue 中自定义指令改变data中的值
- Web Service单元测试工具实例介绍之soapUI
- CSDN博客专家纪要
- java中的增强for循环与js中的增强for循环区别
- 使用bulk collected和forall的方式批量插入数据
- Android应用更新详解,兼容7.0
- 第三方支付平台业务分析
- spring内置的AbstractRssFeedView实现rss文档
- UML常用图的几种关系的总结