备份代码

2026-07-31 11:24:03 +08:00
parent 4aa7949e48
commit c170b31f3a
42 changed files with 1477 additions and 228 deletions
@@ -0,0 +1,183 @@
+<script setup>
+import {useSwiper} from '../composable.js'
+
+const currentPage = defineModel({type: [Number, String], default: 1})
+
+const props = defineProps({
+  id: {type: String, required: true},
+  title: {type: String, default: ''},
+  data: {type: Array, default: () => [1]},
+  pageSize: {type: [Number, String], default: 1},
+  showDot: {type: Boolean, default: true},
+  showPagination: {type: Boolean, default: true},
+  showHover: {type: Boolean, default: false},
+  autoPlay: {type: Boolean, default: false},
+  transitionDuration: {type: Number, default: 300},
+  sourceWidth: {type: Number, default: 276},
+  sourceHeight: {type: Number, default: 355},
+  sourceGap: {type: Number, default: 20},
+})
+
+const emit = defineEmits(['page-change', 'item-click', 'item-hover', 'title-click'])
+
+const {
+  trackRef,
+  itemWidth,
+  itemHeight,
+  itemGap,
+  itemTotalWidth,
+  viewPortWidth,
+  trackWidth,
+  totalPages,
+  clickTitle,
+  goToPage,
+  nextPage,
+  prevPage,
+  handleItemClick,
+  handleItemHover,
+  handleItemHoverLeave,
+  handleItemTouchStart,
+  handleItemTouchEnd,
+} = useSwiper(props, currentPage, emit)
+</script>
+
+<template>
+  <section :id="id" class="generic-carousel">
+    <!-- 标题 -->
+    <slot name="title">
+      <h2 v-if="title" class="carousel-title" @click="clickTitle">{{ title }}</h2>
+    </slot>
+
+    <!-- 分页指示器 -->
+    <div v-if="showDot" class="carousel-pagination">
+      <button
+        v-for="page in totalPages"
+        :key="page"
+        :class="['pagination-dot', {'is-active': page === currentPage}]"
+        @click="goToPage(page)"
+        :aria-label="`切换到第${page}页`"
+      />
+    </div>
+
+    <!-- 导航按钮 -->
+    <div v-if="showPagination && totalPages > 1" class="carousel-navigation flex j-s">
+      <button class="nav-btn prev-btn" @click="prevPage" aria-label="上一页">&lt;</button>
+      <button class="nav-btn next-btn" @click="nextPage" aria-label="下一页">&gt;</button>
+    </div>
+
+    <!-- 轮播内容区域 -->
+    <div class="carousel-content">
+      <div class="carousel-viewport" :style="{width: viewPortWidth}">
+        <div
+          ref="trackRef"
+          class="carousel-track"
+          :style="{width: trackWidth}"
+        >
+          <div
+            v-for="(item, index) in data"
+            :key="index"
+            class="carousel-item"
+            :style="{
+              width: itemWidth + 'px',
+              height: itemHeight + 'px',
+              marginRight: index < data.length - 1 ? itemGap + 'px' : '0',
+            }"
+            @click="handleItemClick(item, index)"
+            @mouseenter="handleItemHover(item, index)"
+            @mouseleave="handleItemHoverLeave(item, index)"
+            @touchstart="handleItemTouchStart(item, index)"
+            @touchend="handleItemTouchEnd"
+          >
+            <slot :item="item" :index="index" :isActive="currentPage === Math.ceil((index + 1) / pageSize)" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.generic-carousel {
+  padding: 20px 0;
+  text-align: center;
+  position: relative;
+
+  .carousel-title {
+    font-family: 'PingFang SC';
+    font-weight: 600;
+    font-size: 18px;
+    color: #333333;
+  }
+
+  .carousel-pagination {
+    width: 64px;
+    height: 4px;
+    margin: 12px auto 20px;
+    display: flex;
+
+    .pagination-dot {
+      flex: 1;
+      height: 100%;
+      background: #d9d9d9;
+      border: none;
+      cursor: pointer;
+      transition: background 0.3s ease;
+
+      &.is-active {
+        background: #0389ff;
+      }
+    }
+  }
+
+  .carousel-navigation {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    padding: 0 8px; /* no */
+    z-index: 10;
+    pointer-events: none;
+
+    .nav-btn {
+      pointer-events: auto;
+      width: 32px; /* no */
+      height: 32px; /* no */
+      border: none;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.9);
+      color: #333;
+      font-size: 16px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+
+.carousel-content {
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-viewport {
+  overflow: hidden;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 0.3s ease;
+  will-change: transform;
+  padding-top: 12px;
+}
+
+.carousel-item {
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+  border-radius: 8px;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+}
+</style>