Vue.directive自定义指令的使用详解 - CSDN文库

52 浏览量更新于2023-10-20 评论收藏 39KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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地址

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38750007

粉丝: 4
资源: 921

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈