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>
|