1、首先贴出element.ui走马灯组件的class，可以直接赋值修改：（如果有内联样式记得用!important）
/* 走马灯每个item */
.el-carousel__item{
}
/* 走马灯当前展示的item */
.is-active{
}
/* 走马灯item的容器 */
.el-carousel__container{
}
/* 整个走马灯的容器，包含指示器等其它组件在内 */
.el-carousel{
}
2、走马灯动态适应屏幕的宽高：（具体细节可以根据需求自己调整）
1）首先修改item的宽：
.el-carousel__item{
width: 80%;
left: -15%;
}
2）自适应高度：
-
在item标签中添加动态的item属性：
:height=" bannerHeight + 'px' " -
在Vue的data中添加上述的
bannerHeight属性，和screenWidth属性bannerHeight : 100,//图片父容器的高度 screenWidth :0,//屏幕的宽度 -
添加方法来动态为data中的这两个值赋值：
- 在mounted中获取到屏幕的宽并赋值给screenWidth，
mounted:function() { this.screenWidth = window.innerWidth; this.setSize(); window.onresize = () =>{ this.screenWidth = window.innerWidth; this.setSize(); }; },- 在methods方法中动态计算高度：
methods:{ setSize:function () { // 通过屏幕宽度(图片宽度)计算高度 this.bannerHeight = 400 / 1920 * this.screenWidth; }, }
3、贴出完整代码：
<div id="app">
<template>
<el-carousel :interval="4000" type="card" arrow="never" :height="bannerHeight + 'px'" :autoplay="autoplay" ref="carousel">
<el-carousel-item v-for="item in carouseData" :key="item.id" :id="item.id">
<img class="element-img" alt="" :src="item.url">
</el-carousel-item>
</el-carousel>
</template>
</div>
var vm = new Vue({
el:"#app",
data(){
return:{
bannerHeight : 100,//图片父容器的高度
screenWidth :0,//屏幕的宽度
}
},
mounted:{
this.screenWidth = window.innerWidth;
this.setSize();
window.onresize = () =>{
this.screenWidth = window.innerWidth;
this.setSize();
};
},
methods:function(){
setSize:function () {
// 通过屏幕宽度(图片宽度)计算高度
this.bannerHeight = 400 / 1920 * this.screenWidth;
},
}
})