101 lines
2.4 KiB
Vue
101 lines
2.4 KiB
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> |