vue自定义指令，报错.可以在线运行的小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义指令--拖拽</title>
</head>
<body>
<div id="app">
<div v-drag :style="{background:'red', width:'200px',height:'200px',position:'absolute',left:0,top:0}"></div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm= new Vue({
el:'#app',
data:{
}
})
Vue.directive('drag', function(){
var oDiv = this.el;
oDiv.onmousedown=function(ev){
var disX = ev.clientX-oDiv.offsetLeft;
var disY = ev.clientY-oDiv.offsetTop;
document.onmousemove = function(ev){
var l = ev.clientX-disX;
var t = ev.clientY-disY;
oDiv.style.left =l+'px';
oDiv.style.top =t+'px';
};
document.onmouseup=function(){
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
}
})
</script>
</html>
花开花落_青藤0回答
随时随地看视频慕课网APP
相关分类
Vue.js