Element UI学习6--Carousel 走马灯

轮播是前端页面运用的比较广泛的一个功能。
在有限空间内，循环播放同一类型的图片、文字等内容。
今天主要学习了Element UI中Carousel 走马灯这一功能的使用方法。

1、基础用法

1、默认 Hover 指示器触发

<template>
    <div>
      <el-carousel>
      <el-carousel-item v-for="item in imgwrap" :key="item.url">
        <img :src="item.url"/>
      </el-carousel-item>
    </el-carousel>
    </div>
</template>
<script>
export default {
     
    data(){
     
        return{
     
            imgwrap:[
                {
     url:require("../assets/img/pic1.jpg")},
                {
     url:require("../assets/img/pic2.jpg")},
                {
     url:require("../assets/img/pic3.jpg")},
                {
     url:require("../assets/img/pic4.jpg")},
                {
     url:require("../assets/img/pic5.jpg")}
            ]
        }
    }
}
</script>
<style>
.el-carousel-item img{
     
  width: 100%;
  height: 100%;
}
</style>

如图：

一般情况下我们导入的图片宽高都是100%,有时候不能准确的计算出容器的宽高，就会遇到图片不能完全显示出来的问题。
将代码改成下面的就可以解决了

<template>
    <div>
      <el-carousel :height="bannerHeight + 'px'">
      <el-carousel-item v-for="item in imgwrap" :key="item.url">
        <img :src="item.url" class="bannerimg"/>
      </el-carousel-item>
    </el-carousel>
    </div>
</template>
<script>
export default {
     
    data(){
     
        return{
     
            bannerHeight: 200,
            imgwrap:[
                {
     url:require("../assets/img/pic1.jpg")},
                {
     url:require("../assets/img/pic2.jpg")},
                {
     url:require("../assets/img/pic3.jpg")},
                {
     url:require("../assets/img/pic4.jpg")},
                {
     url:require("../assets/img/pic5.jpg")}
            ]
        }
    },
     mounted(){
     
       this.setSize();
       window.addEventListener('resize', ()=>{
     
         this.setSize();
       },false);       
  },
  methods:{
     
    setSize(){
     
      this.bannerHeight = document.body.clientWidth / 4
    }
  }
}
</script>
<style>
.bannerimg{
     
  width: 100%;
  height: inherit;
}
</style>

如图

2、Click 指示器触发
默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger属性为click，可以达到点击触发的效果。

3、指示器位置
indicator-position属性定义了指示器的位置。默认情况下，它会显示在走马灯内部。
indicator-position=“outside” 外部
如图：

indicator-position=“none” 不会显示指示器

4、切换箭头
arrow = “always” 一直显示
arrow = “never” 一直隐藏
arrow = “hover” 鼠标悬停时显示

2、卡片化

type=“card” 启用卡片模式
如图：

3、改变方向

默认情况下，direction 为 horizontal。
通过设置 direction 为 vertical 来让轮播上下播放。
如图：