xiangyuan-gov-app/src/common/components/parts/ImageSwiper.vue

<template>
  <swiper 
    class="image-swiper" 
    circular
    :indicator-dots="true"
    :autoplay="true"
    :interval="2000"
    :duration="1000"
    :style="{
      height: `${height}rpx`,
    }"
  >
    <swiper-item v-for="(item, key) in images" :key="key">
      <view 
        class="item"
        :style="{
          height: `${height}rpx`,
          backgroundImage: `url(${item})`,
          backgroundSize: 'cover',
        }"
      >
        <image
          :src="item"
          :style="{ 
            width: '100%',
            height: `${height}rpx`,
            borderRadius: '20rpx'
          }"
          mode="aspectFit"
          @click="onPreviewImage(key)"
        />
      </view>
    </swiper-item>
  </swiper>
</template>

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

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

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

</script>

<style lang="scss">
.image-swiper {
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  image {
    border-radius: 20rpx;
  }
}
</style>