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里使用Dom操作Xml
Jan 22 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
javascript实现动态标签云
2015/10/16 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python 字典访问的三种方法小结
2019/12/05 Python
python 下载文件的几种方法汇总
2021/01/06 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
电大自我鉴定
2013/10/27 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
小小商店教学反思
2014/04/27 职场文书
自主招生推荐信范文
2014/05/10 职场文书
人事专员岗位说明书
2014/07/29 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技
netty 实现tomcat的示例代码
2022/06/05 Servers