| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <template> |
| H | 2 | <div |
| 3 | :class="[ | |
| 4 | 'absolute bottom-32px right-[calc(50%-375px/2+32px)] flex z-12 gap-12px items-center', | |
| 5 | { | |
| 6 | 'flex-row': property.direction === 'horizontal', | |
| 7 | 'flex-col': property.direction === 'vertical' | |
| 8 | } | |
| 9 | ]" | |
| 10 | > | |
| 11 | <template v-if="expanded"> | |
| 12 | <div | |
| 13 | v-for="(item, index) in property.list" | |
| 14 | :key="index" | |
| 15 | class="flex flex-col items-center" | |
| 16 | @click="handleActive(index)" | |
| 17 | > | |
| 18 | <el-image :src="item.imgUrl" fit="contain" class="h-27px w-27px"> | |
| 19 | <template #error> | |
| 20 | <div class="h-full w-full flex items-center justify-center"> | |
| 21 | <Icon icon="ep:picture" :color="item.textColor" /> | |
| 22 | </div> | |
| 23 | </template> | |
| 24 | </el-image> | |
| 25 | <span v-if="property.showText" class="mt-4px text-12px" :style="{ color: item.textColor }"> | |
| 26 | {{ item.text }} | |
| 27 | </span> | |
| 28 | </div> | |
| 29 | </template> | |
| 30 | <!-- todo: @owen 使用APP主题色 --> | |
| 31 | <el-button type="primary" size="large" circle @click="handleToggleFab"> | |
| 32 | <Icon icon="ep:plus" :class="['fab-icon', { active: expanded }]" /> | |
| 33 | </el-button> | |
| 34 | </div> | |
| 35 | <!-- 模态背景：展开时显示，点击后折叠 --> | |
| 36 | <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div> | |
| 37 | </template> | |
| 38 | <script setup lang="ts"> | |
| 39 | import { FloatingActionButtonProperty } from './config' | |
| 40 | ||
| 41 | /** 悬浮按钮 */ | |
| 42 | defineOptions({ name: 'FloatingActionButton' }) | |
| 43 | // 定义属性 | |
| 44 | defineProps<{ property: FloatingActionButtonProperty }>() | |
| 45 | ||
| 46 | // 是否展开 | |
| 47 | const expanded = ref(true) | |
| 48 | // 处理展开/折叠 | |
| 49 | const handleToggleFab = () => { | |
| 50 | expanded.value = !expanded.value | |
| 51 | } | |
| 52 | </script> | |
| 53 | ||
| 54 | <style scoped lang="scss"> | |
| 55 | /* 模态背景 */ | |
| 56 | .modal-bg { | |
| 57 | position: absolute; | |
| 58 | left: calc(50% - 375px / 2); | |
| 59 | top: 0; | |
| 60 | z-index: 11; | |
| 61 | width: 375px; | |
| 62 | height: 100%; | |
| 63 | background-color: rgba(#000000, 0.4); | |
| 64 | } | |
| 65 | ||
| 66 | .fab-icon { | |
| 67 | transform: rotate(0deg); | |
| 68 | transition: transform 0.3s; | |
| 69 | ||
| 70 | &.active { | |
| 71 | transform: rotate(135deg); | |
| 72 | } | |
| 73 | } | |
| 74 | </style> | |
