114 lines
2.2 KiB
Vue
114 lines
2.2 KiB
Vue
<template>
|
||
<view class="float-container">
|
||
<!-- 子菜单按钮 -->
|
||
<view v-for="(item, index) in menus" :key="index" class="sub-btn" :style="getPosition(index)"
|
||
:class="{active: isOpen}" @click.stop="handleClick(item.action)">
|
||
{{ item.title }}
|
||
</view>
|
||
|
||
<!-- 主按钮 -->
|
||
<view class="main-btn" :class="{active: isOpen}" @click.stop="toggleMenu()">
|
||
＋
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
let isOpen = ref(false);
|
||
let menus = reactive([{
|
||
title: '默认值',
|
||
action: 'default'
|
||
},
|
||
{
|
||
title: '扫描记录',
|
||
action: 'scan'
|
||
},
|
||
]);
|
||
|
||
let showPopup = ref(false);
|
||
|
||
// 父组件方法
|
||
const emit = defineEmits(['scanRecord', 'defaultPopup']);
|
||
|
||
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) => {
|
||
if (action == 'scan') {
|
||
emit('scanRecord');
|
||
} else if (action == 'default') {
|
||
emit('defaultPopup');
|
||
}
|
||
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> |