@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismSwiper/PrismSwiper.vue

@@ -1,339 +1,339 @@
-<template>
-  <view class="prism-swiper" :class="{ 'dark-mode': isDarkMode, 'prism-swiper--preview': displayMode === 'preview' }">
-    <swiper
-      class="prism-swiper__container"
-      :class="{ 'prism-swiper__container--preview': displayMode === 'preview' }"
-      :style="{ height: height }"
-      :indicator-dots="false"
-      :autoplay="autoplay"
-      :circular="circular"
-      :interval="interval"
-      :duration="duration"
-      :current="currentIndex"
-      :previous-margin="displayMode === 'preview' ? previousMargin : '0'"
-      :next-margin="displayMode === 'preview' ? nextMargin : '0'"
-      @change="onChange"
-    >
-      <swiper-item v-for="(item, index) in list" :key="index">
-        <view
-          class="prism-swiper__item"
-          :class="{
-            'prism-swiper__item--preview': displayMode === 'preview',
-            'prism-swiper__item--active': displayMode === 'preview' && currentIndex === index
-          }"
-          :style="itemStyle(item)"
-          @click="onItemClick(item, index)"
-        >
-          <image v-if="item.image" class="prism-swiper__image" :src="item.image" mode="aspectFill" />
-          <view v-else-if="item.color" class="prism-swiper__color" :style="{ background: item.color }">
-            <text v-if="item.text" class="prism-swiper__text">{{ item.text }}</text>
-          </view>
-          <slot v-else :item="item" :index="index"></slot>
-        </view>
-      </swiper-item>
-    </swiper>
-
-    <!-- 自定义指示器 -->
-    <!-- 圆点指示器 -->
-    <view v-if="indicatorType === 'dots'" class="prism-swiper__dots">
-      <view
-        v-for="(item, index) in list"
-        :key="index"
-        class="prism-swiper__dot"
-        :class="{ 'prism-swiper__dot--active': currentIndex === index }"
-        @click="goToSlide(index)"
-      ></view>
-    </view>
-
-    <!-- 数字指示器 -->
-    <view v-else-if="indicatorType === 'number'" class="prism-swiper__number">
-      <text>{{ currentIndex + 1 }}</text>
-      <text class="prism-swiper__number-divider">/</text>
-      <text>{{ list.length }}</text>
-    </view>
-
-    <!-- 预览图指示器 -->
-    <view v-else-if="indicatorType === 'thumbnails'" class="prism-swiper__thumbnails">
-      <view
-        v-for="(item, index) in list"
-        :key="index"
-        class="prism-swiper__thumbnail"
-        :class="{ 'prism-swiper__thumbnail--active': currentIndex === index }"
-        @click="goToSlide(index)"
-      >
-        <image v-if="item.image" class="prism-swiper__thumbnail-image" :src="item.image" mode="aspectFill" />
-        <view v-else class="prism-swiper__thumbnail-color" :style="{ background: item.color || '#ccc' }"></view>
-      </view>
-    </view>
-
-    <!-- 手风琴指示器 -->
-    <view v-else-if="indicatorType === 'accordion'" class="prism-swiper__accordion">
-      <view
-        v-for="(item, index) in list"
-        :key="index"
-        class="prism-swiper__accordion-item"
-        :class="{ 'prism-swiper__accordion-item--active': currentIndex === index }"
-        @click="goToSlide(index)"
-      >
-        <view class="prism-swiper__accordion-bar"></view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const props = defineProps({
-  list: {
-    type: Array,
-    default: () => []
-  },
-  height: {
-    type: String,
-    default: '300rpx'
-  },
-  displayMode: {
-    type: String,
-    default: 'normal', // 'normal' | 'preview'
-    validator: (value) => ['normal', 'preview'].includes(value)
-  },
-  previousMargin: {
-    type: String,
-    default: '60rpx'
-  },
-  nextMargin: {
-    type: String,
-    default: '60rpx'
-  },
-  indicatorType: {
-    type: String,
-    default: 'dots', // 'dots' | 'number' | 'thumbnails' | 'accordion'
-    validator: (value) => ['dots', 'number', 'thumbnails', 'accordion'].includes(value)
-  },
-  autoplay: {
-    type: Boolean,
-    default: true
-  },
-  circular: {
-    type: Boolean,
-    default: true
-  },
-  interval: {
-    type: Number,
-    default: 3000
-  },
-  duration: {
-    type: Number,
-    default: 500
-  },
-  radius: {
-    type: String,
-    default: '16rpx'
-  },
-  isDarkMode: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const emit = defineEmits(['change', 'click']);
-
-const currentIndex = ref(0);
-
-function itemStyle(item) {
-  return {
-    borderRadius: props.radius
-  };
-}
-
-function onChange(e) {
-  currentIndex.value = e.detail.current;
-  emit('change', e.detail.current);
-}
-
-function onItemClick(item, index) {
-  emit('click', { item, index });
-}
-
-function goToSlide(index) {
-  currentIndex.value = index;
-}
-</script>
-
-<style lang="scss" scoped>
-.prism-swiper {
-  position: relative;
-  width: 100%;
-}
-
-.prism-swiper__container {
-  width: 100%;
-}
-
-.prism-swiper__item {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  transition: all 0.3s ease;
-}
-
-/* 预览模式样式 */
-.prism-swiper--preview {
-  .prism-swiper__item--preview {
-    opacity: 0.6;
-    transform: scale(0.9);
-
-    &.prism-swiper__item--active {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-}
-
-.prism-swiper__image {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.prism-swiper__color {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.prism-swiper__text {
-  font-size: 32rpx;
-  color: #ffffff;
-  font-weight: 500;
-}
-
-/* 圆点指示器 */
-.prism-swiper__dots {
-  position: absolute;
-  bottom: 16rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 12rpx;
-  z-index: 10;
-}
-
-.prism-swiper__dot {
-  width: 12rpx;
-  height: 12rpx;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.5);
-  transition: all 0.3s ease;
-  cursor: pointer;
-
-  &--active {
-    width: 32rpx;
-    border-radius: 6rpx;
-    background: #FFFFFF;
-  }
-}
-
-/* 数字指示器 */
-.prism-swiper__number {
-  position: absolute;
-  bottom: 16rpx;
-  right: 16rpx;
-  padding: 8rpx 16rpx;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 20rpx;
-  display: flex;
-  align-items: center;
-  gap: 4rpx;
-  font-size: 24rpx;
-  color: #FFFFFF;
-  z-index: 10;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-.prism-swiper__number-divider {
-  margin: 0 4rpx;
-  opacity: 0.7;
-}
-
-/* 预览图指示器 */
-.prism-swiper__thumbnails {
-  position: absolute;
-  bottom: 16rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 12rpx;
-  z-index: 10;
-}
-
-.prism-swiper__thumbnail {
-  width: 80rpx;
-  height: 60rpx;
-  border-radius: 8rpx;
-  overflow: hidden;
-  border: 3rpx solid rgba(255, 255, 255, 0.5);
-  transition: all 0.3s ease;
-  cursor: pointer;
-
-  &--active {
-    border-color: #FFFFFF;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
-  }
-}
-
-.prism-swiper__thumbnail-image,
-.prism-swiper__thumbnail-color {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-/* 手风琴指示器 */
-.prism-swiper__accordion {
-  position: absolute;
-  bottom: 16rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 8rpx;
-  z-index: 10;
-}
-
-.prism-swiper__accordion-item {
-  height: 6rpx;
-  border-radius: 3rpx;
-  overflow: hidden;
-  cursor: pointer;
-}
-
-.prism-swiper__accordion-bar {
-  width: 100%;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.5);
-  transition: all 0.3s ease;
-}
-
-.prism-swiper__accordion-item {
-  width: 40rpx;
-
-  &--active {
-    width: 80rpx;
-
-    .prism-swiper__accordion-bar {
-      background: #FFFFFF;
-    }
-  }
-}
-
-/* 深色模式适配 */
-.dark-mode {
-  .prism-swiper__number {
-    background: rgba(255, 255, 255, 0.15);
-  }
-}
+<template>
+  <view class="prism-swiper" :class="{ 'dark-mode': isDarkMode, 'prism-swiper--preview': displayMode === 'preview' }">
+    <swiper
+      class="prism-swiper__container"
+      :class="{ 'prism-swiper__container--preview': displayMode === 'preview' }"
+      :style="{ height: height }"
+      :indicator-dots="false"
+      :autoplay="autoplay"
+      :circular="circular"
+      :interval="interval"
+      :duration="duration"
+      :current="currentIndex"
+      :previous-margin="displayMode === 'preview' ? previousMargin : '0'"
+      :next-margin="displayMode === 'preview' ? nextMargin : '0'"
+      @change="onChange"
+    >
+      <swiper-item v-for="(item, index) in list" :key="index">
+        <view
+          class="prism-swiper__item"
+          :class="{
+            'prism-swiper__item--preview': displayMode === 'preview',
+            'prism-swiper__item--active': displayMode === 'preview' && currentIndex === index
+          }"
+          :style="itemStyle(item)"
+          @click="onItemClick(item, index)"
+        >
+          <image v-if="item.image" class="prism-swiper__image" :src="item.image" mode="aspectFill" />
+          <view v-else-if="item.color" class="prism-swiper__color" :style="{ background: item.color }">
+            <text v-if="item.text" class="prism-swiper__text">{{ item.text }}</text>
+          </view>
+          <slot v-else :item="item" :index="index"></slot>
+        </view>
+      </swiper-item>
+    </swiper>
+
+    <!-- 自定义指示器 -->
+    <!-- 圆点指示器 -->
+    <view v-if="indicatorType === 'dots'" class="prism-swiper__dots">
+      <view
+        v-for="(item, index) in list"
+        :key="index"
+        class="prism-swiper__dot"
+        :class="{ 'prism-swiper__dot--active': currentIndex === index }"
+        @click="goToSlide(index)"
+      ></view>
+    </view>
+
+    <!-- 数字指示器 -->
+    <view v-else-if="indicatorType === 'number'" class="prism-swiper__number">
+      <text>{{ currentIndex + 1 }}</text>
+      <text class="prism-swiper__number-divider">/</text>
+      <text>{{ list.length }}</text>
+    </view>
+
+    <!-- 预览图指示器 -->
+    <view v-else-if="indicatorType === 'thumbnails'" class="prism-swiper__thumbnails">
+      <view
+        v-for="(item, index) in list"
+        :key="index"
+        class="prism-swiper__thumbnail"
+        :class="{ 'prism-swiper__thumbnail--active': currentIndex === index }"
+        @click="goToSlide(index)"
+      >
+        <image v-if="item.image" class="prism-swiper__thumbnail-image" :src="item.image" mode="aspectFill" />
+        <view v-else class="prism-swiper__thumbnail-color" :style="{ background: item.color || '#ccc' }"></view>
+      </view>
+    </view>
+
+    <!-- 手风琴指示器 -->
+    <view v-else-if="indicatorType === 'accordion'" class="prism-swiper__accordion">
+      <view
+        v-for="(item, index) in list"
+        :key="index"
+        class="prism-swiper__accordion-item"
+        :class="{ 'prism-swiper__accordion-item--active': currentIndex === index }"
+        @click="goToSlide(index)"
+      >
+        <view class="prism-swiper__accordion-bar"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+  height: {
+    type: String,
+    default: '300rpx'
+  },
+  displayMode: {
+    type: String,
+    default: 'normal', // 'normal' | 'preview'
+    validator: (value) => ['normal', 'preview'].includes(value)
+  },
+  previousMargin: {
+    type: String,
+    default: '60rpx'
+  },
+  nextMargin: {
+    type: String,
+    default: '60rpx'
+  },
+  indicatorType: {
+    type: String,
+    default: 'dots', // 'dots' | 'number' | 'thumbnails' | 'accordion'
+    validator: (value) => ['dots', 'number', 'thumbnails', 'accordion'].includes(value)
+  },
+  autoplay: {
+    type: Boolean,
+    default: true
+  },
+  circular: {
+    type: Boolean,
+    default: true
+  },
+  interval: {
+    type: Number,
+    default: 3000
+  },
+  duration: {
+    type: Number,
+    default: 500
+  },
+  radius: {
+    type: String,
+    default: '16rpx'
+  },
+  isDarkMode: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['change', 'click']);
+
+const currentIndex = ref(0);
+
+function itemStyle(item) {
+  return {
+    borderRadius: props.radius
+  };
+}
+
+function onChange(e) {
+  currentIndex.value = e.detail.current;
+  emit('change', e.detail.current);
+}
+
+function onItemClick(item, index) {
+  emit('click', { item, index });
+}
+
+function goToSlide(index) {
+  currentIndex.value = index;
+}
+</script>
+
+<style lang="scss" scoped>
+.prism-swiper {
+  position: relative;
+  width: 100%;
+}
+
+.prism-swiper__container {
+  width: 100%;
+}
+
+.prism-swiper__item {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+/* 预览模式样式 */
+.prism-swiper--preview {
+  .prism-swiper__item--preview {
+    opacity: 0.6;
+    transform: scale(0.9);
+
+    &.prism-swiper__item--active {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+.prism-swiper__image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.prism-swiper__color {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.prism-swiper__text {
+  font-size: 32rpx;
+  color: #ffffff;
+  font-weight: 500;
+}
+
+/* 圆点指示器 */
+.prism-swiper__dots {
+  position: absolute;
+  bottom: 16rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 12rpx;
+  z-index: 10;
+}
+
+.prism-swiper__dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  &--active {
+    width: 32rpx;
+    border-radius: 6rpx;
+    background: #FFFFFF;
+  }
+}
+
+/* 数字指示器 */
+.prism-swiper__number {
+  position: absolute;
+  bottom: 16rpx;
+  right: 16rpx;
+  padding: 8rpx 16rpx;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+  font-size: 24rpx;
+  color: #FFFFFF;
+  z-index: 10;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.prism-swiper__number-divider {
+  margin: 0 4rpx;
+  opacity: 0.7;
+}
+
+/* 预览图指示器 */
+.prism-swiper__thumbnails {
+  position: absolute;
+  bottom: 16rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 12rpx;
+  z-index: 10;
+}
+
+.prism-swiper__thumbnail {
+  width: 80rpx;
+  height: 60rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+  border: 3rpx solid rgba(255, 255, 255, 0.5);
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  &--active {
+    border-color: #FFFFFF;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
+  }
+}
+
+.prism-swiper__thumbnail-image,
+.prism-swiper__thumbnail-color {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* 手风琴指示器 */
+.prism-swiper__accordion {
+  position: absolute;
+  bottom: 16rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8rpx;
+  z-index: 10;
+}
+
+.prism-swiper__accordion-item {
+  height: 6rpx;
+  border-radius: 3rpx;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.prism-swiper__accordion-bar {
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.5);
+  transition: all 0.3s ease;
+}
+
+.prism-swiper__accordion-item {
+  width: 40rpx;
+
+  &--active {
+    width: 80rpx;
+
+    .prism-swiper__accordion-bar {
+      background: #FFFFFF;
+    }
+  }
+}
+
+/* 深色模式适配 */
+.dark-mode {
+  .prism-swiper__number {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
 </style>