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 相关文章推荐
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
使用console进行性能测试
Apr 27 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 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
PHP_MySQL教程-第一天
2007/03/18 PHP
PHP insert语法详解
2008/06/07 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
js中的replace方法使用介绍
2013/10/28 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现排序算法
2014/02/14 Python
Python中的作用域规则详解
2015/01/30 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
秋季校运动会广播稿
2014/02/23 职场文书
期末学生评语大全
2014/04/24 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
2015入党个人自传范文
2015/06/26 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
德劲DE1102数字调谐收音机机评
2022/04/07 无线电
box-shadow单边阴影的实现
2023/05/21 HTML / CSS