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

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

自定义指令基本就是用来操作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;      
    }
  })

可以使用工具库

vue更多的api整理-->go

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。