menduner/src/views/mall/home/components/carousel.vue

<template>
  <v-carousel cycle hide-delimiter-background :show-arrows="false" style="height: 100%; min-width: 1184px;">
    <v-carousel-item v-for="(item, i) in carouselList" :key="i">
      <!-- <v-img :src="item.imgUrl" :lazy-src="item.imgUrl" style="width: 100%; height: auto;">
        <template v-slot:placeholder>
            <v-row align="center" class="fill-height ma-0" justify="center">
              <v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
            </v-row>
        </template>
      </v-img> -->

      <!-- <figure> -->
        <!-- <img :src="item.imgUrl" :lazy-src="item.imgUrl" style="width: 100%;" /> -->
      <!-- </figure> -->
      
      <v-img :src="item.imgUrl" :lazy-src="item.imgUrl" style="width: 100%">
        <template v-slot:placeholder>
          <v-row align="center" class="fill-height ma-0" justify="center">
            <v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
          </v-row>
        </template>
      </v-img>
    </v-carousel-item>
  </v-carousel>
</template>

<script setup>
defineOptions({ name: 'mall-home-carousel'})
import { ref } from 'vue'
const props = defineProps({ templateData: Object })

const carouselList = ref([])
const Carousel = props.templateData?.home?.components.find(item => item.id === 'Carousel')
carouselList.value = Carousel?.property?.items || []
</script>

<style scoped lang="scss">
</style>