uniapp-dyckui 4.1.1

package/src/components/MyComs/Swiper/README.md

@@ -0,0 +1,202 @@
+# Swiper 轮播图组件
+
+一个基于 Vue 3 + TypeScript 开发的轮播图组件，支持自动轮播、手动切换、指示器、箭头导航等功能，提供丰富的配置选项。
+
+## 基本用法
+
+### 引入组件
+
+```vue
+<script setup>
+import Swiper from '@/components/MyComs/Swiper/index.vue'
+</script>
+```
+
+### 基础使用
+
+```vue
+<template>
+  <Swiper :items="imageItems">
+    <template #default="{ item }">
+      <img :src="item.image" :alt="item.title" class="swiper-image" />
+    </template>
+  </Swiper>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Swiper from '@/components/MyComs/Swiper/index.vue'
+
+const imageItems = ref([
+  { image: 'https://picsum.photos/id/237/800/400', title: '图片1' },
+  { image: 'https://picsum.photos/id/1040/800/400', title: '图片2' },
+  { image: 'https://picsum.photos/id/1043/800/400', title: '图片3' }
+])
+</script>
+
+<style scoped>
+.swiper-image {
+  width: 100%;
+  height: 300px;
+  object-fit: cover;
+}
+</style>
+```
+
+## API
+
+### Props
+
+| 参数名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| items | `any[]` | `[]` | 轮播数据数组 |
+| initialIndex | `number` | `0` | 初始轮播索引 |
+| autoPlay | `boolean` | `true` | 是否自动轮播 |
+| interval | `number` | `3000` | 轮播间隔时间（毫秒） |
+| duration | `number` | `300` | 轮播过渡时长（毫秒） |
+| showIndicators | `boolean` | `true` | 是否显示指示器 |
+| showArrows | `boolean` | `false` | 是否显示左右箭头 |
+| loop | `boolean` | `true` | 是否循环播放 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 轮播切换时触发 | `index: number` - 当前轮播索引 |
+| prev | 点击上一张时触发 | `index: number` - 当前轮播索引 |
+| next | 点击下一张时触发 | `index: number` - 当前轮播索引 |
+
+### Slots
+
+| 插槽名 | 说明 | 参数 |
+| --- | --- | --- |
+| default | 轮播项内容 | `{ item: any, index: number }` |
+
+## 示例
+
+### 禁用自动播放
+
+```vue
+<Swiper :items="imageItems" :auto-play="false">
+  <!-- 内容 -->
+</Swiper>
+```
+
+### 显示左右箭头
+
+```vue
+<Swiper :items="imageItems" :show-arrows="true">
+  <!-- 内容 -->
+</Swiper>
+```
+
+### 自定义轮播间隔
+
+```vue
+<Swiper :items="imageItems" :interval="5000">
+  <!-- 内容 -->
+</Swiper>
+```
+
+### 非循环模式
+
+```vue
+<Swiper :items="imageItems" :loop="false">
+  <!-- 内容 -->
+</Swiper>
+```
+
+### 隐藏指示器
+
+```vue
+<Swiper :items="imageItems" :show-indicators="false">
+  <!-- 内容 -->
+</Swiper>
+```
+
+### 带文字内容的轮播
+
+```vue
+<Swiper :items="contentItems" :show-arrows="true">
+  <template #default="{ item }">
+    <div class="swiper-content">
+      <h3>{{ item.title }}</h3>
+      <p>{{ item.description }}</p>
+      <button>{{ item.button }}</button>
+    </div>
+  </template>
+</Swiper>
+
+<script setup>
+const contentItems = ref([
+  { 
+    title: '欢迎使用', 
+    description: '这是一个功能强大的轮播图组件',
+    button: '了解更多'
+  },
+  { 
+    title: '响应式设计', 
+    description: '适配各种屏幕尺寸',
+    button: '查看详情'
+  }
+])
+</script>
+```
+
+## 自定义样式
+
+### 指示器样式
+
+可以通过深度选择器自定义指示器样式：
+
+```vue
+<style scoped>
+.swiper-demo {
+  :deep(.indicator-item) {
+    background-color: rgba(0, 0, 0, 0.3);
+    
+    &.active {
+      background-color: #409eff;
+    }
+  }
+}
+</style>
+```
+
+### 箭头样式
+
+可以通过深度选择器自定义箭头样式：
+
+```vue
+<style scoped>
+.swiper-demo {
+  :deep(.swiper-arrow) {
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.7);
+    }
+  }
+}
+</style>
+```
+
+## 注意事项
+
+1. 确保 `items` 参数是一个非空数组，否则轮播图不会显示内容
+2. 当 `autoPlay` 设为 `true` 时，建议 `items` 数组长度至少为 2
+3. 自定义内容时，建议为轮播项设置固定高度，以确保轮播图显示正常
+4. 在移动端使用时，建议关闭自动轮播，以提升用户体验
+
+## 浏览器兼容性
+
+支持所有现代浏览器，包括 Chrome、Firefox、Safari、Edge 等。
+
+## 版本历史
+
+### v1.0.0
+- 初始版本
+- 支持自动轮播、手动切换
+- 支持指示器和箭头导航
+- 提供丰富的配置选项

package/src/components/MyComs/Swiper/index.ts

@@ -0,0 +1,2 @@
+import Component from './index.vue';
+export default Component;

package/src/components/MyComs/Swiper/index.vue

@@ -0,0 +1,245 @@
+<template>
+  <view class="sw-swiper">
+    <view
+      class="swiper-wrapper"
+      :style="{
+        transform: `translateX(-${currentIndex * 100}%)`,
+        transition: `transform ${duration}ms ease`,
+      }"
+    >
+      <view
+        v-for="(item, index) in items"
+        :key="index"
+        class="swiper-item"
+      >
+        <slot :item="item" :index="index" />
+      </view>
+    </view>
+
+    <!-- 指示器 -->
+    <view v-if="showIndicators" class="swiper-indicators">
+      <view
+        v-for="(item, index) in items"
+        :key="index"
+        class="indicator-item"
+        :class="{ active: index === currentIndex }"
+        @click="currentIndex = index"
+      />
+    </view>
+
+    <!-- 左右箭头 -->
+    <view
+      v-if="showArrows"
+      class="swiper-arrow swiper-arrow-left"
+      @click="prev"
+    />
+    <view
+      v-if="showArrows"
+      class="swiper-arrow swiper-arrow-right"
+      @click="next"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch, withDefaults } from 'vue'
+
+interface Props {
+  items: any[]
+  initialIndex?: number
+  autoPlay?: boolean
+  interval?: number
+  duration?: number
+  showIndicators?: boolean
+  showArrows?: boolean
+  loop?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  initialIndex: 0,
+  autoPlay: true,
+  interval: 3000,
+  duration: 300,
+  showIndicators: true,
+  showArrows: false,
+  loop: true,
+})
+
+const emit = defineEmits<{
+  (e: 'change', index: number): void
+  (e: 'prev', index: number): void
+  (e: 'next', index: number): void
+}>()
+
+const currentIndex = ref(props.initialIndex)
+let timer: any = null
+
+// 自动播放
+function startAutoPlay() {
+  if (props.autoPlay && props.items.length > 1) {
+    timer = setInterval(() => {
+      next()
+    }, props.interval)
+  }
+}
+
+function stopAutoPlay() {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+// 上一张
+function prev() {
+  if (props.loop) {
+    currentIndex.value = currentIndex.value === 0 ? props.items.length - 1 : currentIndex.value - 1
+  }
+  else if (currentIndex.value > 0) {
+    currentIndex.value--
+  }
+  emit('prev', currentIndex.value)
+  emit('change', currentIndex.value)
+}
+
+// 下一张
+function next() {
+  if (props.loop) {
+    currentIndex.value = currentIndex.value === props.items.length - 1 ? 0 : currentIndex.value + 1
+  }
+  else if (currentIndex.value < props.items.length - 1) {
+    currentIndex.value++
+  }
+  emit('next', currentIndex.value)
+  emit('change', currentIndex.value)
+}
+
+// 监听items变化
+watch(() => props.items, (newItems) => {
+  if (newItems.length < currentIndex.value + 1) {
+    currentIndex.value = Math.min(currentIndex.value, newItems.length - 1)
+  }
+  stopAutoPlay()
+  startAutoPlay()
+}, { deep: true })
+
+// 监听自动播放设置
+watch(() => props.autoPlay, (autoPlay) => {
+  if (autoPlay) {
+    startAutoPlay()
+  }
+  else {
+    stopAutoPlay()
+  }
+})
+
+onMounted(() => {
+  startAutoPlay()
+})
+
+onUnmounted(() => {
+  stopAutoPlay()
+})
+
+// 暴露方法
+defineExpose({
+  prev,
+  next,
+  currentIndex,
+})
+</script>
+
+<style lang="less" scoped>
+// 轮播图组件样式
+.sw-swiper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  .swiper-wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  .swiper-item {
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  // 指示器
+  .swiper-indicators {
+    position: absolute;
+    bottom: 32rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 16rpx;
+
+    .indicator-item {
+      width: 16rpx;
+      height: 16rpx;
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.5);
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &.active {
+        width: 16rpx;
+        height: 16rpx;
+        background-color: #fff;
+      }
+    }
+  }
+
+  // 箭头
+  .swiper-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 76rpx;
+    height: 76rpx;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.85);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10;
+    transition: all 0.3s ease;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 1);
+      transform: translateY(-50%) scale(1.1);
+    }
+
+    &:before {
+      content: '';
+      width: 24rpx;
+      height: 24rpx;
+      border-top: 4rpx solid #333;
+      border-left: 4rpx solid #333;
+      display: inline-block;
+    }
+
+    &.swiper-arrow-left {
+      left: 30rpx;
+
+      &:before {
+        transform: rotate(-45deg);
+      }
+    }
+
+    &.swiper-arrow-right {
+      right: 30rpx;
+
+      &:before {
+        transform: rotate(135deg);
+      }
+    }
+  }
+}
+</style>