Vue自定义指令拖拽功能示例


Posted in Javascript onFebruary 17, 2017

下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>实例方法</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <script src="../js/vue1.0.js"></script>
 <script src="../js/vue-resource.js"></script>
 <script>
  //自定义指令
  Vue.directive('drag',function(){
   var oDiv = this.el;
   oDiv.onmousedown = function(ev){
    var disX = ev.clientX -oDiv.offsetLeft;
    var disY = ev.clientY - oDiv.offsetTop;
    document.onmousemove = function(ev){
     var l = ev.clientX-disX;
     var t = ev.clientY-disY;
     oDiv.style.left = l+'px';
     oDiv.style.top = t+'px';
    };
    document.onmouseup = function(){
     document.onmousemove=null;
     document.onmouseup=null;
    };
   };
  });
  window.onload = function(){
   var vm = new Vue({
    el:'#box',
    data:{}
   });
  }
 </script>
</head>
<body>
<div id="box">
 <div v-drag :style="{width:'100px', height:'100px', background:'aqua', position:'absolute', right:0, top:0}">
 </div>
</div>
</body>
</html>

下面看下Vue自定义键盘信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义键盘信息</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/vue1.0.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    Vue.directive('on').keyCodes.ctrl=17;
    Vue.directive('on').keyCodes.myenter=13;
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{},
        methods:{
          show:function(){
            alert(111);
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <input type="text" @keydown.ctrl="show">
  <hr>
  <input type="text" @keydown.myenter="show | debounce 2000">
</div>
</body>
</html>

以上所述是小编给大家介绍的Vue自定义指令拖拽功能及键盘信息,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
AngularJS入门之动画
Jul 27 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
javascript数组去重方法分析
Dec 15 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
js canvas画布实现高斯模糊效果
Nov 27 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 #Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 #Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 #Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 #Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 #Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 #Javascript
浅析JavaScript中var that=this
Feb 17 #Javascript
You might like
PHP通用检测函数集合
2006/11/25 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
Python制作CSDN免积分下载器
2015/03/10 Python
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python实现的计算器功能示例
2018/04/26 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
python生成任意频率正弦波方式
2020/02/25 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
Shell如何接收变量输入
2016/08/06 面试题
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
Java面向对象面试题
2016/12/26 面试题
幼儿园开学家长寄语
2014/01/19 职场文书
责任书格式
2015/01/29 职场文书
Python进程间的通信之语法学习
2022/04/11 Python