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


  • 2019-12-06 10:49:39

    npm 查看源 换源

    npm,cnpm,查看源,切换源,npm config set registry https://registry.npmjs.org

  • 2019-12-06 11:01:31

    npm发布包流程详解 有demo

    npm发布包步骤,以及踩过的坑(见红颜色标准): 1.注册npm账号,并完成Email认证(否则最后一步提交会报Email错误) 2.npm添加用户或登陆:npm adduser 或 npm login

  • 2019-12-06 13:16:18

    vue mixins组件复用的几种方式

    最近在做项目的时候,研究了mixins,此功能有妙处。用的时候有这样一个场景,页面的风格不同,但是执行的方法,和需要的数据非常的相似。我们是否要写两种组件呢?还是保留一个并且然后另个一并兼容另一个呢? 不管以上那种方式都不是很合理,因为组件写成2个,不仅麻烦而且维护麻烦;第二种虽然做了兼容但是页面逻辑造成混乱,必然不清晰;有没有好的方法,有那就是用vue的混合插件mixins。混合在Vue是为了提出相似的数据和功能,使代码易懂,简单、清晰。

  • 2019-12-06 13:26:30

    vue的mixins混入合并规则

    混入minxins:分发vue组件中可复用功能的灵活方式。混入对象可以包含任意组件选项。组件使用混入对象时,所有混入对象的选项将混入该组件本身的选项。

  • 2019-12-06 16:50:34

    Intellij idea 如何关闭无用的提示

    Linux:Settings —> Editor —> Inspections —> General —> Duplicated Code Mac:Preferences --> Editor —> Inspections —> General —> Duplicated Code fragment 将对应的勾去掉。

  • 2019-12-09 15:36:56

    神秘的 shadow-dom 浅析,shadow-root

    顾名思义, shadow-dom,直译的话就是 影子dom ?我觉得可以理解为潜藏在黑暗中的 DOM 结构,也就是我们无法直接控制操纵的 DOM 结构。前端同学经常用开发者工具的话,查看 DOM 结构的时候,肯定看到过下面这样的结构:

  • 2019-12-10 11:13:50

    前端实战-基于Nuxt的SVG使用

    虽然我们在日常开发的时候,在使用iview 或者element ui等组件时,通常会包含一些常用icon;但是在面对一些特定的需求时,或者自己想high一下,这些通用的icon并不能很好的满足我们。这个时候我们可能会拿到一些SVG适量图,但是怎么去使用这些矢量图呢。

  • 2019-12-10 11:15:08

    用CSS给SVG 的内容添加样式

    SVG图形的一个最常见用例是图标系统,其中最常用的SVG sprite技术就是使用SVG<use> 元素在文档中任意位置“实例化”图标。 使用<use>元素实例化图标或任何其它的SVG元素或图像,给元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能给你介绍一些方法来解决:使用<use>引入的内容添加样式受限的问题。 但是在开始之前,我们先快速浏览一下SVG的主要结构和分组元素,然后慢慢进入use的世界中,以及shadow DOM,然后重回CSS的怀抱。我们会逐步讲解为什么给<use>内容添加样式会比较麻烦,以及有什么好的解决方案。