bigDataApp/pages/cbd/components/floating-button.vue

<template>
	<view
		class="floating-container"
		:style="{ top: position.y + 'px', left: position.x + 'px' }"
		@touchstart="onTouchStart"
		@touchmove="onTouchMove"
		@touchend="onTouchEnd"
		@click="onClick"
	>
		<view class="floating-icon" :class="{ expanded: isExpanded }">
			<view class="icon-content">
				<slot name="icon">
					<text class="default-icon">+</text>
				</slot>
			</view>
			<view v-if="isExpanded" class="expanded-content">
				<slot name="expanded">
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'FloatingButton',
	props: {
		// 初始位置距离右边的距离
		right: {
			type: Number,
			default: 20
		},
		// 初始位置距离底部的距离
		bottom: {
			type: Number,
			default: 100
		},
		// 按钮大小
		size: {
			type: Number,
			default: 50
		},
		// 是否可拖拽
		draggable: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			position: {
				x: 0,
				y: 0
			},
			isDragging: false,
			isExpanded: false,
			startX: 0,
			startY: 0,
			lastX: 0,
			lastY: 0,
			clickStartTime: 0,
			hasMoved: false
		};
	},
	mounted() {
		this.initPosition();
	},
	methods: {
		// 初始化位置
		initPosition() {
			const systemInfo = uni.getSystemInfoSync();
			const screenWidth = systemInfo.windowWidth;
			const screenHeight = systemInfo.windowHeight;

			this.position = {
				x: screenWidth - this.right - this.size,
				y: screenHeight - this.bottom - this.size
			};
		},

		// 触摸开始
		onTouchStart(e) {
			if (!this.draggable) return;

			const touch = e.touches[0];
			this.startX = touch.clientX;
			this.startY = touch.clientY;
			this.lastX = this.position.x;
			this.lastY = this.position.y;
			this.isDragging = true;
			this.hasMoved = false;
			this.clickStartTime = Date.now();
		},

		// 触摸移动
		onTouchMove(e) {
			if (!this.draggable || !this.isDragging) return;

			e.preventDefault();

			const touch = e.touches[0];
			const deltaX = touch.clientX - this.startX;
			const deltaY = touch.clientY - this.startY;

			// 如果移动超过5像素，认为是拖拽操作
			if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
				this.hasMoved = true;
			}

			const systemInfo = uni.getSystemInfoSync();
			const screenWidth = systemInfo.windowWidth;
			const screenHeight = systemInfo.windowHeight;

			// 计算新位置，限制在屏幕范围内
			let newX = this.lastX + deltaX;
			let newY = this.lastY + deltaY;

			// 边界限制
			newX = Math.max(0, Math.min(newX, screenWidth - this.size));
			newY = Math.max(0, Math.min(newY, screenHeight - this.size));

			this.position = {
				x: newX,
				y: newY
			};
		},

		// 触摸结束
		onTouchEnd(e) {
			if (!this.draggable) return;

			this.isDragging = false;

			// 自动吸附到屏幕边缘
			this.snapToEdge();
		},

		// 吸附到屏幕左右边缘
		snapToEdge() {
			const systemInfo = uni.getSystemInfoSync();
			const screenWidth = systemInfo.windowWidth;

			// 判断当前在左半屏还是右半屏
			const centerX = this.position.x + this.size / 2;

			if (centerX < screenWidth / 2) {
				// 吸附到左边
				this.position.x = 10;
			} else {
				// 吸附到右边
				this.position.x = screenWidth - this.size - 10;
			}
		},

		// 点击事件
		onClick(e) {
			// 如果发生了拖拽移动，不触发点击事件
			const clickDuration = Date.now() - this.clickStartTime;

			if (this.hasMoved || clickDuration > 300) {
				return;
			}

			// 切换展开/收起状态
			this.isExpanded = !this.isExpanded;

			// 触发父组件事件
			this.$emit(this.isExpanded ? 'expand' : 'collapse', {
				expanded: this.isExpanded
			});
		},

		// 手动展开
		expand() {
			this.isExpanded = true;
		},

		// 手动收起
		collapse() {
			this.isExpanded = false;
		}
	}
};
</script>

<style scoped>
.floating-container {
	position: fixed;
	z-index: 9999;
	width: 50px;
	height: 50px;
}
.expanded-content{
	position: absolute;
}
.floating-icon {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.icon-content {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.default-icon {
	font-size: 24px;
	color: #ffffff;
	font-weight: bold;
}

</style>