本篇文章主要介绍了Vue.directive自定义本文来源gaodaimacom搞#^代%!码&网(指令的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法.
自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用.
1. 自定义指令实现拖拽
HTML:
<div>我可以拖拽</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>我可以拖拽</div>
2. 图片加载
图片在加载过程中,未加载完成时,使用一个随机的颜色占位,图片加载完后直接显示,可以使用自定义指令来完成
HTML:
</img> //参数不可以直接填写url地址 data () { url:'src/assets/logo.png-600' }
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是Vue.directive自定义指令的使用详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue.directive自定义指令的使用详解
转载请注明原文链接：Vue.directive自定义指令的使用详解
