可以通过设置Carousel的属性来实现一次轮播4个标签,具体步骤如下:

  1. 在Vue组件中引入Carousel和CarouselItem组件:
  2. <template>
      <div>
        <el-carousel :interval="5000" :arrow="false" :autoplay="true" :type="'card'" :card-num="4">
          <el-carousel-item v-for="(item, index) in list" :key="index">
            {{ item }}
          </el-carousel-item>
        </el-carousel>
      </div>
    </template>
    
    <script>
    import { Carousel, CarouselItem } from 'element-ui'
    
    export default {
      components: {
        Carousel,
        CarouselItem
      },
      data () {
        return {
          list: ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6', '标签7', '标签8', '标签9']
        }
      }
    }
    </script>
    
  3. 在el-carousel组件中添加以下属性:
    • interval:轮播间隔时间,单位为毫秒,默认为3000ms。
    • arrow:是否显示左右箭头,设置为false则不显示,默认为true。
    • autoplay:是否自动轮播,设置为true则自动轮播,默认为false。
    • type:轮播类型,设置为'card'则显示卡片式样式,默认为'slide'。
    • card-num:一次轮播的卡片数量,设置为4则一次轮播4个卡片。
  4. 在el-carousel-item组件中循环展示标签列表数据。

通过以上步骤,就可以实现一次轮播4个标签的效果了。

Vue+ElementUI Carousel 走马灯:实现一次轮播4个标签

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

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