今天给大家利用vue自定义指令做一个简单拖拽效果,所谓自定义指令就是Vue除了核心功能默认内置的指令 (v-model
和 v-show
),Vue 也允许注册自定义指令。因为Vue自带的指令都是比较偏向于工具化,有些时候在实现具体的业务逻辑的时候,发现不够用,所以就需要自定义指令,下图是自定义指令的语法。.
今天所要实现的效果,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<div v-drag v-deo style="width: 200px;height: 200px; border: 1px solid black;background-color: red;border-radius: 50%;position:absolute;"></div><!--写法为v-自定义名字-->
<script>
Vue.directive("deo",function(){
this.el.onclick=function(){
this.style.background="rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")" //作颜色随机
}
});
Vue.directive("drag",function(){//作拖拽效果
this.el.onmousedown=function(e){//鼠标按下
var l=e.clientX-this.offsetLeft;
var t=e.clientY-this.offsetTop;
document.onmousemove=function(e){//鼠标移动
this.style.left=e.clientX-l+"px";
this.style.top=e.clientY-t+"px";
}.bind(this);
document.onmouseup=function(){//鼠标弹起
this.onmousemove=this.onmouseup=null;
};
};
})
new Vue({
el:"body",//注意的是vue实例化对象必须写在自定义指令后面
})
</script>
</body>
</html>
其效果图为(由于不能上传视频,静态图片不能很好感受效果,所以传个动态感受下,主要鼠标按下可以拖动圆形移动,点击能随机切换颜色):
今天又是元气满满的一天,加油!