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 相关文章推荐
js onclick事件传参讲解
Nov 06 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
javascript如何写热点图
Dec 08 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
JS中Array数组学习总结
Jan 18 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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批量生成静态HTML的简单原理和方法
2014/04/20 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python中利用xpath解析HTML的方法
2018/05/14 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
公司前台辞职报告
2014/01/19 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
班级团队活动方案
2014/08/14 职场文书
党员剖析材料范文
2014/12/18 职场文书
运动会观后感
2015/06/09 职场文书
捐书仪式主持词
2015/07/04 职场文书
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技