很多教程都是在讲自定义指令的概念和语法, 看的相当蛋疼. 本文不讲语法和概念, 只讲用法.
自定义指令基本就是用来操作 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 整理 -->
来源: http://www.jb51.net/article/108047.htm