轮播图（vue3+TS)

carousel-picture.vue

<script setup lang="ts">
import type { ImageItem } from '../../type/type';

import { ElCarousel, ElCarouselItem, ElImage } from 'element-plus';

interface Props {
  images: ImageItem[];
  carouselHeight?: string;
}
defineOptions({
  name: 'CarouselPicture',
});
withDefaults(defineProps<Props>(), {
  carouselHeight: () => '300px',
});
</script>
<template>
  <ElCarousel :style="{ height: carouselHeight }" trigger="click">
    <ElCarouselItem
      v-for="item in images"
      :key="item.id"
      :style="{ height: carouselHeight }"
    >
      <ElImage :src="item.src" style="width: 100%; height: 100%" />
    </ElCarouselItem>
  </ElCarousel>
</template>

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

type.ts

interface ImageItem {
  src: string;
  id: number;
}

使用

<script lang="ts" setup>
import type { ImageItem } from '../../type/type';

import CarouselPicture from '../../components/home/carousel-picture.vue';

const imageList: ImageItem[] = [
  {
    id: 1,
    src: 'https://ts1.cn.mm.bing.net/th/id/R-C.cbd8e2565d0511876267d254d07f322a?rik=6PyCbYI6KlyoXg&riu=http%3a%2f%2fimg.alicdn.com%2fimgextra%2fi4%2f737575635%2fTB2d10QXZaCJuJjy1zcXXXPgFXa_!!0-martrix_bbs.jpg&ehk=FoH%2bP6kR955tBCwEVnUdR9r7ZvZCmZpJEo448hyGD0E%3d&risl=&pid=ImgRaw&r=0',
  },
  {
    id: 2,
    src: 'https://ts1.cn.mm.bing.net/th/id/R-C.762fc3035f5bc99dbca60dfd1b137fa6?rik=HunieOjiZqWXHg&riu=http%3a%2f%2fimg.alicdn.com%2fimgextra%2fi2%2f737575635%2fTB2XOfiXRrkJKJjSsphXXagMpXa_!!0-martrix_bbs.jpg&ehk=XEskmEQFFJ3NjnE5QQRkW7lVFFzo6obnfsDIqG%2bne%2bk%3d&risl=&pid=ImgRaw&r=0',
  },
  {
    id: 3,
    src: 'https://file.moyublog.com/free_wallpapers_files/m102qrzhbs4.jpg',
  },
  {
    id: 4,
    src: 'https://img.ixintu.com/download/jpg/201910/870dcadccd61876afeceb09620a0a08c.jpg!con',
  },
  {
    id: 5,
    src: 'https://ts1.cn.mm.bing.net/th/id/R-C.1f970201068f50cd0f0f38d29b9eaffa?rik=4akQRlZattC%2f3w&riu=http%3a%2f%2fimg.17sucai.com%2fupload%2f361356%2f2015-06-21%2f988cb28d47314ab659fe6e81d0f782cc.jpg%3fx-oss-process%3dstyle%2fpri&ehk=GRItGhxRtmXsz3Z%2f9Sadfi0ZpsDybVv07xzg6K%2fU%2fk4%3d&risl=&pid=ImgRaw&r=0',
  },
];
</script>

<template>
  <!-- 轮播图 -->
  <CarouselPicture :images="imageList" carousel-height="40vh" />
</template>

效果