c#自定义Attribute获取接口实现示例代码
220
2023-06-03
Vue.directive自定义指令的使用详解
很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法.
自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用.
1. 自定义指令实现拖拽
HTML:
js:
vue.directive('drag',
inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略
let oDiv=el; //el --> 触发的DOM元素
oDhttp://iv.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:
2. 图片加载
图片在加载过程中,未加载完成时,使用一个随机的颜色占位,图片加载完后直接显示,可以使用自定义指令来完成
HTML:
//参数不可以直接填写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;
}
})
可以使用lodash.js工具库
vue更多的API整理--&http://gt;GO
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~