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

2020-03-22 21:16:07

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下来执行就好。


  • 2020-11-07 16:31:02

    nginx配置X-Frame-Options允许多个域名iframe嵌套

    有时候我们需要允许多个url的来源,但是又不能全部开放,所以应该匹配第三种方法ALLOW-FROM url,那么多个url该如何配置呢,百度了所有网站都没有找到,那么这里写给大家,其实很简单: add_header X-Frame-Options 'ALLOW-FROM https://xxx.xxxxxx.com https://xxx2.xxxxxxx.com'; 就是使用空格隔开就好了!

  • 2020-11-08 08:31:51

    meteor在不同端口启动服务

    当没有任何参数时,run是默认行为,在幕后,它3000端口开启node.js服务器实例,同时开启监听3001端口的MongoDB服务

  • 2020-11-11 15:05:39

    nuxt如何在其它js文件中使用store

    在新建的js文件中想用store里面的数据,比如token想在封装的axios里面,请求头里面去使用,亦或者通过app的JS接口获取token并存储在store里面。我们都知道如何在vue中如何使用。

  • 2020-11-12 14:01:46

    使用postMessage来实现父子通信跨域

    1.子向父,子postMessage,父监听message; 2.父向子,父postMessage,子监听message; 3.测试发现,子向父postMessage的时候,源可以写为‘*’,父向子postMessage的时候,源需要写成子的源,(也就是子页面的协议+主机号+端口) 测试代码部分: