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


Posted in Javascript onJune 02, 2017

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

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;
  };
 };
}
},

以上所述是小编给大家介绍的vue 中自定义指令改变data中的值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
Jquery EasyUI $.Parser
Jun 02 #jQuery
BootStrap 动态表单效果
Jun 02 #Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 #Javascript
angularjs定时任务的设置与清除示例
Jun 02 #Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 #Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 #Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 #Javascript
You might like
自己动手做一个SQL解释器
2006/10/09 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
PHP使用数组实现队列
2012/02/05 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
JS判断一个数是否是水仙花数
2017/06/11 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
js实现打字小游戏
2019/12/17 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
python的socket编程入门
2018/01/29 Python
Django 外键的使用方法详解
2019/07/19 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python 实现单例模式的5种方法
2020/09/23 Python
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
党委班子剖析材料
2014/08/21 职场文书
个人授权委托书范本
2014/09/14 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书