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 相关文章推荐
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
理解javascript对象继承
Apr 17 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 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的一个简单加密解密代码
2014/01/14 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
php服务器的系统详解
2019/10/12 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python Django基础二之URL路由系统
2019/07/18 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
境外导游求职信
2014/02/27 职场文书
学习决心书
2014/03/11 职场文书
2015年三万活动总结
2015/03/25 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL