源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-11-30 19:31 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Vue.directive自定义指令的使用详解
很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法. 自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用. [b]1. 自定义指令实现拖拽[/b] 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>
[b]2. 图片加载[/b] 图片在加载过程中,未加载完成时,使用一个随机的颜色占位,图片加载完后直接显示,可以使用自定义指令来完成 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;      
    }
  })
可以使用[url=http://lodashjs.com/docs/]lodash.js[/url]工具库 vue更多的API整理-->[url=http://xiazai.jb51.net/201703/yuanma/vue-master_jb51.rar]GO [/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部