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 相关文章推荐
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
500行python代码实现飞机大战
2020/04/24 Python
Python configparser模块常用方法解析
2020/05/22 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Python常用外部指令执行代码实例
2020/11/05 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
自我鉴定范文
2013/11/10 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
家长对孩子的寄语
2015/02/26 职场文书
十月围城观后感
2015/06/08 职场文书
opencv检测动态物体的实现
2021/07/21 Python