用vue做的跟随鼠标移动的div

1、最近接到一个任务，就是在既存用electron-vue开发的桌面端程序上追加随鼠标移动的动画效果，之前一直使用angular和react，没怎么接触过vue，先做一个vue的简单例子，然后再整合。2、程序比较简单，直接上代码<!DOCTYPE html><html><head><meta char

姚华军

12913人浏览 · 2019-01-16 13:32:10

姚华军 · 2019-01-16 13:32:10 发布

1、最近接到一个任务，就是在既存用electron-vue开发的桌面端程序上追加随鼠标移动的动画效果，之前一直使用angular和react，没怎么接触过vue，先做一个vue的简单例子，然后再整合。

2、程序比较简单，直接上代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Vue学习</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
		
		<style type="text/css"> 
			.drag{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 0;
				left: 0;
				background-color: red;
				background: url(at-all.png);
				background-size: cover;
			}
			.drag:hover{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 0;
				left: 0;
				cursor:pointer;
				background-color: red;
				background: url(at-all.png);
				background-size: cover;
			}
		</style>
		
    </head>
	
	<div id="app1" v-drag class="drag"></div>
	
	<script>
		// 拖动div元素
		let vm1 = new Vue({
			el:'#app1',
			// 自定义指令
			directives:{
				drag(el, bindings){
					el.onmousedown = function(e){
						var disx = e.pageX - el.offsetLeft;
						var disy = e.pageY - el.offsetTop;
						document.onmousemove = function (e){
							el.style.left = e.pageX - disx + 'px';
							el.style.top = e.pageY - disy + 'px';
						}
						document.onmouseup = function(){
							document.onmousemove = document.onmouseup = null;
						}
					}
				}
			}
		})
    </script>
	</body>

</html>

3、代码可以正常运行，想用的朋友，自己COPY下来执行就好。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^