Vue.directive自定义指令的使用详解


Posted in Javascript onMarch 10, 2017

很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法.

自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用.

1. 自定义指令实现拖拽

HTML:

<div v-drag>我可以拖拽</div>

JS:

Vue.directive('drag', 
 inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略
  let oDiv=el; //el --> 触发的DOM元素
  oDiv.onmousedown=function(e){
    let l=e.clientX-oDiv.offsetLeft;
    let t=e.clientY-oDiv.offsetTop;
    document.onmousemove=function(e){
      oDiv.style.left=e.clientX-l+'px';
      oDiv.style.top=e.clientY-t+'px';
    };
    oDiv.onmouseup=function(){
      document.onmousemove=null;
      oDiv.onmouseup=null;
    }
  }
})

自定义指令还可以引入第三方插件,之前都是用JQuery来构建项目.

自定义指令的好处就是不管之前是用什么写的JQuery还好或是原生js也好都可以直接拿来封装成自定义指令,不需要重写

例如这个拖拽:

Drag.js:

export default function(el){
  let oDiv=el;
  oDiv.onmousedown=function(e){
    let l=e.clientX-oDiv.offsetLeft;
    let t=e.clientY-oDiv.offsetTop;
    document.onmousemove=function(e){
      oDiv.style.left=e.clientX-l+'px';
      oDiv.style.top=e.clientY-t+'px';
    };
    oDiv.onmouseup=function(){
      document.onmousemove=null;
      oDiv.onmouseup=null;
    }
  }
}

Vue:

import drag from 'drag.js'
Vue.directive('drag',drag)

HTML:

<div v-drag>我可以拖拽</div>

2. 图片加载

图片在加载过程中,未加载完成时,使用一个随机的颜色占位,图片加载完后直接显示,可以使用自定义指令来完成

HTML:

<img v-imgUrl="url"></img> //参数不可以直接填写url地址

  data () {
    url:'src/assets/logo.png'
  }

Vue:

Vue.directive('imgUrl',function(el,binding){
    var color=Math.floor(Math.random()*1000000);//设置随机颜色
    el.style.backgroundColor='#'+color;

    var img=new Image();
    img.src=binding.value;// -->binding.value指的是指令后的参数
    img.onload=function(){
      el.style.backgroundColor='';
      el.src=binding.value;      
    }
  })

可以使用lodash.js工具库

vue更多的API整理-->GO

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
layui原生表单验证的实例
Sep 09 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
实现vuex原理的示例
Oct 21 Javascript
React自定义hook的方法
Jun 25 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 #Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 #Javascript
微信小程序 页面传值详解
Mar 10 #Javascript
详解Vue生命周期的示例
Mar 10 #Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 #Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 #Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 #Javascript
You might like
javascript编程起步(第四课)
2007/01/10 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
NodeJS安装图文教程
2018/04/19 NodeJs
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
python实现静态web服务器
2019/09/03 Python
Python列表操作方法详解
2020/02/09 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
缓刑人员的思想汇报
2014/01/11 职场文书
12岁生日演讲稿
2014/05/14 职场文书
建材投资建议书
2014/05/16 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书