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 来让轮播上下播放。
如图：