lxp_Maxcess/components/tools/tools.vue

<template>
	<view class="float-container">
		<view v-for="(item,index) of props.type" :key="index">
			<view class="sub-btn" :style="getPosition(index)" v-if="item === 'defaultPopup'"
				:class="{active: isOpen}" @click.stop="handleClick('defaultPopup')">
				<span>{{ t('public.mrz') }}</span>
			</view>
			<view class="sub-btn" :style="getPosition(index)" v-if="item === 'scanRecord'"
				:class="{active: isOpen}" @click.stop="handleClick('scanRecord')">
				<span>{{ t('public.smjl') }}</span>
			</view>
		</view>
		<view class="main-btn" :class="{active: isOpen}" @click.stop="toggleMenu()">＋</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, defineEmits,defineProps } from 'vue';
	import i18n from '../../locale/index'
	import { useI18n } from 'vue-i18n'
	const getI18n = useI18n()
	const { t, locale } = getI18n
	const emit = defineEmits(['scanRecord', 'defaultPopup']);
	const props = defineProps({
		type:{
			type:Array,
			default: () => {
				return ['scanRecord','defaultPopup']
			}
		}
	})
	const isOpen = ref(false);	
	const showPopup = ref(false);
	const toggleMenu = () => { isOpen.value = !isOpen.value; }
	const getPosition = (index:any) => {
		if (!isOpen.value) return {}
		return {
			transform: `translate(${5}rpx, ${-((160*index)+160)}rpx)`
		}
	}
	const handleClick = (action:any) => {
		emit(action);
		isOpen.value = !isOpen.value;
	}
	const open = () => { showPopup.value = true; }
	const close = () => { showPopup.value = false; }
</script>

<style scoped lang="scss">
	.float-container {
		position: fixed;
		right: 30rpx;
		bottom: 30rpx;
		z-index: 9;
	
		.main-btn {
			position: relative;
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			background: #3370FF;
			color: white;
			font-size: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.2);
			transition: transform 0.3s;
			z-index: 10000;
		}
	
		.main-btn.active {
			transform: rotate(135deg);
			// transform: translate(-50%, -50%);
		}
	
	
		.sub-btn {
			position: absolute;
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			background: white;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			opacity: 0;
			transform: translate(0, 0);
			transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
			box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
	
			font-size: 25rpx;
		}
	
		.sub-btn.active {
			opacity: 1;
		}
	
	}
</style>