front-end/mobile-code/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'}">
			<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: {
		// rpx 为0时值为auto
		left: {
			type: Number,
			default: 0
		},
		// rpx 当为0时且left不为0，值为auto
		right: {
			type: Number,
			default: 20
		},
		// rpx bottom值
		bottom: {
			type: Number,
			default: 140
		},
		// 点击遮罩 是否可关闭
		maskClosable: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			isOpen: false,
			hidden: true,
			timer: null,
			btnList: [
				{
					name: '首页',
					icon: 'iconshouye',
					url: '/pages/admin/workbench'
				},
				{
					name: '添加图库',
					icon: 'icontianjiatuku',
					url: '/pages/admin/workbench'
				},
				{
					name: '发货',
					icon: 'iconfahuo',
					url: '/pages/admin/workbench'
				}
			]
		}
	},
	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
		}
	},
	beforeDestroy() {
		clearTimeout(this.timer)
		this.timer = null
	}
}
</script>

<style lang="scss" scoped>

	.tui-fab-box {
		width: 100px;
		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: 80px;
		border-top-right-radius: 80px;
		position: relative;
		top: 40px;
		padding: 30px 0 30px;
	}

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

	.tui-fab-item-box {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 30rpx;
		.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 5px 2px rgba(0, 0, 0, 0.1);
		transition: all 0.2s linear;
		background-image: linear-gradient(0deg, #357eff, #0dc9fd);
		width: 100%;
		height: 100px;
		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>