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

2020-03-19 19:50:31

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>


  • 2020-12-01 17:25:39

    axios并发操作

    很多时候,我们需要同时向后端进行多个请求,当所有请求都返回数据后,再进行一些操作。

  • 2020-12-02 14:45:35

    Remote-SSH使用教程 VSCode

    微软开发了一个VSCode的插件Remote-SSH,可以说是目前比较完美的解决了在windows下开发linux程序的问题。

  • 2020-12-02 22:56:09

    android设置禁止横屏失效崩溃

    误区,其实这两个代码都不是禁止横屏的,可以说根本没有禁止横屏的代码,这两个代码是设置竖屏的。 并且安卓先检测xml代码,如果是竖屏就直接展示竖屏的,但是如果java代码中设置的横屏,他会先展示竖屏咱展示横屏的 。

  • 2020-12-03 10:43:18

    xshell 连接 wsl

    装上 ubuntu on windows 后,默认要先打开 cmd, 再运行 bash 进入 ubuntu 的 shell。 但是这个shell很难看,配色不好就算了,还存在各种复制粘贴麻烦、默认没进入 home 目录、各种报警声等问题。所以尝试用 xshell 登陆 ubuntu

  • 2020-12-03 10:48:41

    在window10和Linux子系统 WSL如何互传文件

    想将 window下下载的文件上传到 linux 子系统中,如何用命令实现,其实可以将文件直接拖拽到 linux 在window下的目录即可(C:\Users\yunan.hu\AppData\Local\Packages\CanonicalGroupLimited.Ubuntu20.04onWindows_79rhkp1fndgsc\LocalState\rootfs)但是在linux下用命令怎么实现呢?