fs-uni-template/components/fs-fab/fs-fab.vue

<template>
	<view class="fs-fab">
		<view class="fs-fab-btn" :style="{ right, bottom }">
			<view class="fs-fab-option" :class="{ 'fs-fab-scale': visible }">
				<slot name="option">
					<fs-avatar
						class="fs-fab-option-gutter"
						v-for="(item, index) in options"
						:key="index"
						:size="size"
						:bgColor="item.bgColor"
						:bgColorType="item.bgColorType"
						@click="handleOption(item)"
					>
						{{ item.name }}
					</fs-avatar>
				</slot>
			</view>

			<fs-avatar :size="size" bgColorType="danger" @click="handleToggle" v-if="visible">
				<fs-icon type="icon-close" :size="iconSize"></fs-icon>
			</fs-avatar>
			<fs-avatar :size="size" :bgColor="bgColor" @click="handleToggle" v-else>
				<slot name="icon">
					<fs-icon
						type="icon-plus"
						:size="iconSize"
						class="fs-fab-plus"
						:class="{ 'fs-fab-visible': visible }"
					></fs-icon>
				</slot>
			</fs-avatar>
		</view>

		<fs-mask v-if="showMask" v-model="visible"></fs-mask>
	</view>
</template>

<script>
/**
 * 悬浮按钮组件
 * @description 悬浮按钮组件
 * @property {String} right 按钮右边距
 * @property {String} bottom 按钮下边距
 * @property {Array} options 选项
 * @property {String} size 按钮大小
 * @property {String} iconSize 图标大小
 * @property {String} bgColor 背景色
 * @property {Boolean} showMask 是否显示遮罩
 */
export default {
	name: 'fs-fab'
}
</script>

<script setup>
import { ref } from 'vue'

const props = defineProps({
	right: {
		type: String,
		default: '40rpx'
	},
	bottom: {
		type: String,
		default: '40rpx'
	},
	options: {
		type: Array,
		default: () => []
	},
	size: {
		type: String,
		default: '120rpx'
	},
	iconSize: {
		type: String,
		default: '50rpx'
	},
	bgColor: String,
	showMask: Boolean
})

const emits = defineEmits(['clickOption'])

const visible = ref(false)

const handleToggle = () => {
	visible.value = !visible.value
}
const handleOption = item => {
	close()
	emits('clickOption', item)
}
const close = () => {
	visible.value = false
}

defineExpose({
	close
})
</script>

<style lang="scss" scoped>
.fs-fab {
	&-btn {
		position: fixed;
		margin-bottom: var(--window-bottom);
		z-index: 900;
	}

	&-plus {
		transition: all 0.2s;
	}
	&-visible {
		transform: rotate(315deg);
	}

	&-option {
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
		transition: all 0.2s;
		transform: translateY(-50%);
		opacity: 0;
		z-index: -1;

		&-gutter {
			margin-top: 20rpx;
		}
	}
	&-scale {
		transform: translateY(0);
		opacity: 1;
		z-index: 900;
	}
}
</style>