ImageSwiper.vue 723 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <template>
  2. <swiper
  3. class="image-swiper"
  4. circular
  5. :indicator-dots="true"
  6. :autoplay="true"
  7. :interval="2000"
  8. :duration="1000"
  9. >
  10. <swiper-item v-for="(item, key) in images" :key="key">
  11. <view class="item">
  12. <ImageWrapper :src="item" mode="aspectFill" width="750rpx" radius="20rpx" />
  13. </view>
  14. </swiper-item>
  15. </swiper>
  16. </template>
  17. <script setup lang="ts">
  18. import ImageWrapper from '@/common/components/ImageWrapper.vue';
  19. import type { PropType } from 'vue';
  20. defineProps({
  21. images: {
  22. type: Array as PropType<string[]>,
  23. default: () => [],
  24. },
  25. })
  26. </script>
  27. <style lang="scss">
  28. .image-swiper {
  29. height: 400rpx;
  30. image {
  31. border-radius: 20rpx;
  32. }
  33. }
  34. </style>