minnan/src/pages/parts/ImageSwiper.vue

<template>
  <swiper 
    class="image-swiper" 
    circular
    :indicator-dots="true"
    :autoplay="true"
    :interval="2000"
    :duration="1000"
  >
    <swiper-item v-for="(item, key) in images" :key="key">
      <view class="item">
        <Image
          :src="item"
          width="100%"
          :radius="15"
          mode="aspectFill"
          @click="onPreviewImage(key)"
        />
      </view>
    </swiper-item>
  </swiper>
</template>

<script setup lang="ts">
import { useSwiperImagePreview } from '@/common/composeabe/SwiperImagePreview';
import Image from '@/components/basic/Image.vue';
import type { PropType } from 'vue';

const props = defineProps({
  images: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
})

const { onPreviewImage } = useSwiperImagePreview(() => props.images || [])

</script>

<style lang="scss">
.image-swiper {
  height: 400rpx;

  image {
    border-radius: 20rpx;
  }
}
</style>