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

最新推荐文章于 2025-02-07 18:08:51 发布

原创

最新推荐文章于 2025-02-07 18:08:51 发布 · 459 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

#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