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 中{},[]中括号,大括号使用详解
May 12 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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抽象工厂模式(Elgg)
2010/03/21 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php写的AES加密解密类分享
2014/06/20 PHP
jquery $.getJSON()跨域请求
2011/12/21 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
美术教师自我鉴定
2014/02/12 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
公司经理任命书
2014/06/05 职场文书
工地安全生产标语
2014/06/06 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
灵山大佛导游词
2015/02/04 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript