Vue手动封装可拖拽图标组件

不会秃头的小白灬

于 2024-05-10 15:59:47 发布

阅读量216

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_46178693/article/details/138669843

版权

#Vue手动封装可拖拽图标组件
1.新建组件并引用组件

<floatIcon  v-show="showAI" ref="fu"></floatIcon>
import floatIcon from "./components/floatIcon.vue";

2.组件相关代码

<template>
	<div>
		<a @click="GoToAI" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end"  ref="fu" class="float">
			<img style="width: .8rem;" src="../assets/imgs/aiIcon.png" alt="">
		</a>
	</div>
	
</template>
<script>
export default {
	name:'',
	props: {
	},
	data () {
		return {
			flags: false,//控制使用
			position: {
				x: 0,
				y: 0
			},
			nx: '',
			ny: '',
			dx: '',
			dy: '',
			xPum: '',
			yPum: '',
			
		}
	},
	watch:{

	},
	mounted() {	
	},
	methods:{
		GoToAI(){
			this.$router.push('/AI');
		},
		// @mousedown @touchstart PC端和移动端的方法
		// @mousemove @touchmove
		// @mouseup @touchend
		down() {
			this.flags = true;
			var touch;
			if (event.touches) {
				touch = event.touches[0];
			} else {
				touch = event;
			}
			this.position.x = touch.clientX;
			this.position.y = touch.clientY;
			this.dx = this.$refs.fu.offsetLeft;
			this.dy = this.$refs.fu.offsetTop;
		},
		move() {
			if (this.flags) {
				var touch;
				if (event.touches) {
					touch = event.touches[0];
				} else {
					touch = event;
				}
				this.nx = touch.clientX - this.position.x;
				this.ny = touch.clientY - this.position.y;
				this.xPum = this.dx + this.nx;
				this.yPum = this.dy + this.ny;
				let width=window.innerWidth - this.$refs.fu.offsetWidth//屏幕宽度减去自身控件宽度
				let height=window.innerHeight - this.$refs.fu.offsetHeight//屏幕高度减去自身控件高度
				this.xPum < 0 && (this.xPum = 0)
				this.yPum < 0 && (this.yPum = 0)
				this.xPum > width && (this.xPum = width)
				this.yPum > height && (this.yPum = height)
				// if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
					this.$refs.fu.style.left = this.xPum + 'px';
					this.$refs.fu.style.top = this.yPum + 'px';
				// }
				//阻止页面的滑动默认事件
				document.addEventListener(
					'touchmove',
					function() {
						event.preventDefault();
					},
					false
				);
			}
			// top.getCurrentPages()[0].$refs.fu.GoToIM
		},
		//鼠标释放时候的函数
		end() {
			// 靠左自动吸附
			this.$refs.fu.style.left= '0px';
			this.flags = false;
		},	
		
	}
}
</script>
<style lang="scss">	
.float{
	position : fixed;
	left: 0px;
	top :80%;
	touch-action :none; 
	text-align: center;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	line-height: 48px;
	color: white;
	z-index: 9999999999;
}
</style>