<template>
  <div class="slider-container">
    <el-carousel :interval="3000" arrow="always" indicator-position="outside">
      <el-carousel-item v-for="item in sliderList" :key="item.id">
        <img :src="item.imgUrl" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElCarousel, ElCarouselItem } from 'element-plus';

const sliderList = ref([
  { id: 1, imgUrl: 'https://picsum.photos/800/600?random=1' },
  { id: 2, imgUrl: 'https://picsum.photos/800/600?random=2' },
  { id: 3, imgUrl: 'https://picsum.photos/800/600?random=3' },
]);

function getSliderList() {
  return sliderList;
}

export default {
  components: {
    ElCarousel,
    ElCarouselItem,
  },
  setup() {
    return {
      sliderList,
      getSliderList,
    };
  },
};
</script>

<style lang="scss" scoped>
.slider-container {
  width: 100%;
  height: 600px;
}
</style>
用element-plus框架插入轮播图组件宽度100高度600 滑动可切换轮播图生成vue3格式 script setup代码要求所有方法或箭头函数都用function定义要求所有变量为ref响应式无需任何文字说明只要源码即可

原文地址: https://www.cveoy.top/t/topic/bbGd 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录