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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
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的ZIP压缩类分享
2014/05/04 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php制作文本式留言板
2015/03/18 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
input的focus方法使用
2010/03/13 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
JS实现放大镜效果
2020/09/21 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
详解Python中的文本处理
2015/04/11 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python创建文件备份的脚本
2018/09/11 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
酒店总经理欢迎词
2014/01/08 职场文书
土地转让协议书
2014/09/27 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python