portal/src/components/Swiper/mobile/index.vue

<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;
    z-index: 10;
    pointer-events: none;

    .nav-btn {
      pointer-events: auto;
      width: 32px;
      height: 32px;
      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>