From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue | 74 +++++++++++++++++++++++++++++++++++++
1 files changed, 74 insertions(+), 0 deletions(-)
diff --git a/src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue b/src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue
new file mode 100644
index 0000000..c2b9926
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/FloatingActionButton/index.vue
@@ -0,0 +1,74 @@
+<template>
+ <div
+ :class="[
+ 'absolute bottom-32px right-[calc(50%-375px/2+32px)] flex z-12 gap-12px items-center',
+ {
+ 'flex-row': property.direction === 'horizontal',
+ 'flex-col': property.direction === 'vertical'
+ }
+ ]"
+ >
+ <template v-if="expanded">
+ <div
+ v-for="(item, index) in property.list"
+ :key="index"
+ class="flex flex-col items-center"
+ @click="handleActive(index)"
+ >
+ <el-image :src="item.imgUrl" fit="contain" class="h-27px w-27px">
+ <template #error>
+ <div class="h-full w-full flex items-center justify-center">
+ <Icon icon="ep:picture" :color="item.textColor" />
+ </div>
+ </template>
+ </el-image>
+ <span v-if="property.showText" class="mt-4px text-12px" :style="{ color: item.textColor }">
+ {{ item.text }}
+ </span>
+ </div>
+ </template>
+ <!-- todo: @owen 浣跨敤APP涓婚鑹� -->
+ <el-button type="primary" size="large" circle @click="handleToggleFab">
+ <Icon icon="ep:plus" :class="['fab-icon', { active: expanded }]" />
+ </el-button>
+ </div>
+ <!-- 妯℃�佽儗鏅細灞曞紑鏃舵樉绀猴紝鐐瑰嚮鍚庢姌鍙� -->
+ <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
+</template>
+<script setup lang="ts">
+import { FloatingActionButtonProperty } from './config'
+
+/** 鎮诞鎸夐挳 */
+defineOptions({ name: 'FloatingActionButton' })
+// 瀹氫箟灞炴��
+defineProps<{ property: FloatingActionButtonProperty }>()
+
+// 鏄惁灞曞紑
+const expanded = ref(false)
+// 澶勭悊灞曞紑/鎶樺彔
+const handleToggleFab = () => {
+ expanded.value = !expanded.value
+}
+</script>
+
+<style scoped lang="scss">
+/* 妯℃�佽儗鏅� */
+.modal-bg {
+ position: absolute;
+ left: calc(50% - 375px / 2);
+ top: 0;
+ z-index: 11;
+ width: 375px;
+ height: 100%;
+ background-color: rgba(#000000, 0.4);
+}
+
+.fab-icon {
+ transform: rotate(0deg);
+ transition: transform 0.3s;
+
+ &.active {
+ transform: rotate(135deg);
+ }
+}
+</style>
--
Gitblit v1.8.0