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/MenuSwiper/index.vue | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 119 insertions(+), 0 deletions(-)
diff --git a/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue b/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue
new file mode 100644
index 0000000..fc6d718
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue
@@ -0,0 +1,119 @@
+<template>
+ <el-carousel
+ :height="`${carouselHeight}px`"
+ :autoplay="false"
+ arrow="hover"
+ indicator-position="outside"
+ >
+ <el-carousel-item v-for="(page, pageIndex) in pages" :key="pageIndex">
+ <div class="flex flex-row flex-wrap">
+ <div
+ v-for="(item, index) in page"
+ :key="index"
+ class="relative flex flex-col items-center justify-center"
+ :style="{ width: columnWidth, height: `${rowHeight}px` }"
+ >
+ <!-- 鍥炬爣 + 瑙掓爣 -->
+ <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`">
+ <!-- 鍙充笂瑙掕鏍� -->
+ <span
+ v-if="item.badge?.show"
+ class="absolute right--10px top--10px z-1 h-20px rounded-10px p-x-6px text-center text-12px leading-20px"
+ :style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }"
+ >
+ {{ item.badge.text }}
+ </span>
+ <el-image v-if="item.iconUrl" :src="item.iconUrl" class="h-full w-full" />
+ </div>
+ <!-- 鏍囬 -->
+ <span
+ v-if="property.layout === 'iconText'"
+ class="text-12px"
+ :style="{
+ color: item.titleColor,
+ height: `${TITLE_HEIGHT}px`,
+ lineHeight: `${TITLE_HEIGHT}px`
+ }"
+ >
+ {{ item.title }}
+ </span>
+ </div>
+ </div>
+ </el-carousel-item>
+ </el-carousel>
+</template>
+
+<script setup lang="ts">
+import { MenuSwiperProperty, MenuSwiperItemProperty } from './config'
+/** 鑿滃崟瀵艰埅 */
+defineOptions({ name: 'MenuSwiper' })
+const props = defineProps<{ property: MenuSwiperProperty }>()
+// 鏍囬鐨勯珮搴�
+const TITLE_HEIGHT = 20
+// 鍥炬爣鐨勯珮搴�
+const ICON_SIZE = 32
+// 鍨傜洿闂磋窛锛氫竴琛屼笂涓嬬殑闂磋窛
+const SPACE_Y = 16
+
+// 鍒嗛〉
+const pages = ref<MenuSwiperItemProperty[][]>([])
+// 杞挱鍥鹃珮搴�
+const carouselHeight = ref(0)
+// 琛岄珮
+const rowHeight = ref(0)
+// 鍒楀
+const columnWidth = ref('')
+watch(
+ () => props.property,
+ () => {
+ // 璁＄畻鍒楀锛氭瘡涓�鍒楃殑鐧惧垎姣�
+ columnWidth.value = `${100 * (1 / props.property.column)}%`
+ // 璁＄畻琛岄珮锛氬浘鏍� + 鏂囧瓧锛堜粎鏄剧ず鍥剧墖鏃朵负0锛� + 鍨傜洿闂磋窛 * 2
+ rowHeight.value =
+ (props.property.layout === 'iconText' ? ICON_SIZE + TITLE_HEIGHT : ICON_SIZE) + SPACE_Y * 2
+ // 璁＄畻杞挱鐨勯珮搴︼細琛屾暟 * 琛岄珮
+ carouselHeight.value = props.property.row * rowHeight.value
+
+ // 姣忛〉鏁伴噺锛氳鏁� * 鍒楁暟
+ const pageSize = props.property.row * props.property.column
+ // 娓呯┖鍒嗛〉
+ pages.value = []
+ // 姣忎竴椤电殑鑿滃崟
+ let pageItems: MenuSwiperItemProperty[] = []
+ for (const item of props.property.list) {
+ // 鏈〉婊″憳锛屾柊寤轰笅涓�椤�
+ if (pageItems.length === pageSize) {
+ pageItems = []
+ }
+ // 澧炲姞涓�椤�
+ if (pageItems.length === 0) {
+ pages.value.push(pageItems)
+ }
+ // 鏈〉澧炲姞涓�涓�
+ pageItems.push(item)
+ }
+ },
+ { immediate: true, deep: true }
+)
+</script>
+
+<style lang="scss">
+// 閲嶅啓鎸囩ず鍣ㄦ牱寮忥紝涓� APP 淇濇寔涓�鑷�
+:root {
+ .el-carousel__indicator {
+ padding-top: 0;
+ padding-bottom: 0;
+ .el-carousel__button {
+ --el-carousel-indicator-height: 6px;
+ --el-carousel-indicator-width: 6px;
+ --el-carousel-indicator-out-color: #ff6000;
+ border-radius: 6px;
+ }
+ }
+ .el-carousel__indicator.is-active {
+ .el-carousel__button {
+ --el-carousel-indicator-width: 12px;
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0