front-end/hdApp/src/components/plugin/fab.vue

<template>
	<!-- 全局公共悬浮按钮 -->
	<view @touchmove.stop.prevent>
		<view class="tui-fab-box" :class="{'tui-fab-right':!left || (left && right)}" :style="{left:getLeft(),right:getRight(),bottom:bottom+'rpx'}" @touchstart="down" @touchmove="move" @touchend="end" id="moveDiv">
			<view class="tui-fab-btn" :class="{'tui-visible':isOpen,'tui-fab-hidden':hidden}">
				<div class="tui-fab-item-box" v-for="(item,index) in btnList" :key="index" @tap.stop="handleClick(index)">
					<div class="item-list">
						<div class="list-icon">
							<i class="iconfont" :class="[item.icon]"></i>
						</div>
						<div class="list-name">{{ item.name }}</div>
					</div>
				</div>
			</view>
			<view class="tui-fab-item" :class="{'tui-active':isOpen}" @tap.stop="handleClick(-1)">
				<i class="iconfont" :class="[isOpen? 'icontupiantianjia' : 'iconcaidan']"></i>
			</view>
		</view>
		<view class="tui-fab-mask" :class="{'tui-visible':isOpen}" @tap="handleClickCancel"></view>
	</view>
</template>

<script>
// 拓展出来的按钮不应多于6个，否则违反了作为悬浮按钮的快速、高效的原则
export default {
	name: 'tuiFab',
	props: {
		// 点击遮罩 是否可关闭
		maskClosable: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			isOpen: false,
			hidden: true,
			timer: null,
			btnList: [
				{
					name: '首页',
					icon: 'iconshouye',
					url: '/admin/home/workbench'
				},
				{
					name: '添加图库',
					icon: 'icontianjiatuku',
					url: '/admin/home/workbench'
				},
				{
					name: '发货',
					icon: 'iconfahuo',
					url: '/admin/home/workbench'
				}
			],

			winWidth: 750,
			winHeight: 1336,
			left: 0,
			right: 20,
			bottom: 140,
			position: { x: 0, y: 0 },
			nx: '',
			ny: '',
			dx: '',
			dy: '',
			xPum: '',
			yPum: '',
			flags: false
		}
	},
	mounted() {
		uni.getSystemInfo({
			success: res => {
				this.winWidth = res.screenWidth * 2
				this.winHeight = res.windowHeight * 2
			}
		})
	},
	methods: {
		getLeft() {
			let val = 'auto'
			if (this.left && !this.right) {
				val = this.left + 'rpx'
			}
			return val
		},
		getRight() {
			let val = this.right + 'rpx'
			if (this.left && !this.right) {
				val = 'auto'
			}
			return val
		},
		handleClick: function(index) {
			this.hidden = false
			clearTimeout(this.timer)
			if (index == -1 && this.btnList.length) {
				this.isOpen = !this.isOpen
			} else {
				this.$emit('click', {
					index: index
				})
				this.isOpen = false
			}
			if (!this.isOpen) {
				this.timer = setTimeout(() => {
					this.hidden = true
				}, 200)
			}
		},
		handleClickCancel: function() {
			if (!this.maskClosable) return
			this.isOpen = false
		},
		// 实现移动端拖拽
		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 = moveDiv.offsetLeft
			this.dy = moveDiv.offsetTop
			// console.log('down', touch)
		},
		move() {
			event.preventDefault()
			if (this.flags) {
				let touch, totalHeight
				let wheight = this.winWidth
				let objHeight = 50

				if (event.touches) {
					touch = event.touches[0]
				} else {
					touch = event
				}

				this.nx = touch.clientX - this.position.x // 拖动x长度
				this.ny = touch.clientY - this.position.y // 拖动y长度
				this.xPum = this.dx + this.nx // 距离左侧距离
				this.yPum = this.dy + this.ny // 距离顶部距离

				// console.log('lalaal', wheight, this.nx, this.ny, this.xPum, this.yPum)

				if (this.navType) {
					if (this.yPum > 0) {
						if (wheight - objHeight - this.yPum > 0) {
							totalHeight = wheight - objHeight - this.yPum
						} else {
							totalHeight = 0
						}
					}
				} else {
					objHeight += 200
					if (this.yPum - objHeight > 0) {
						if (wheight - this.yPum > 0) {
							totalHeight = wheight - this.yPum
						} else {
							totalHeight = 0
						}
					}
				}

				// console.log('totalHeight', totalHeight)

				this.bottom = totalHeight

				// console.log('this.bottom', this.bottom)
			}
		},
		end() {
			this.flags = false
		}
	},
	beforeDestroy() {
		clearTimeout(this.timer)
		this.timer = null
	}
}
</script>

<style lang="scss" scoped>
	.tui-fab-box {
		width: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		position: fixed;
		z-index: 99997;
	}

	.tui-fab-right {
		align-items: center;
	}

	.tui-fab-btn {
		transform: scale(0);
		transition: all 0.2s ease-in-out;
		opacity: 0;
		visibility: hidden;
		background-color: #fff;
		border-top-left-radius: 80upx;
		border-top-right-radius: 80upx;
		position: relative;
		top: 40upx;
		padding: 30upx 0 30upx;
	}

	.tui-fab-hidden {
		height: 0;
		width: 0;
	}

	.tui-fab-item-box {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 30upx;
		.item-list {
			text-align: center;
			color: #333;
		}
		.list-name {
			font-weight: 400;
			transform: scale(0.8);
		}
	}

	.tui-fab-item {
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 5upx 2upx rgba(0, 0, 0, 0.1);
		transition: all 0.2s linear;
		background-image: linear-gradient(0deg, #357eff, #0dc9fd);
		width: 100%;
		height: 100upx;
		border-radius: 50%;
		color: #fff;
	}

	.tui-active {
		transform: rotate(135deg);
	}

	.tui-fab-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.75);
		z-index: 99996;
		transition: all 0.2s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.tui-visible {
		visibility: visible;
		opacity: 1;
		transform: scale(1);
	}
</style>