1. Primero publique la clase del componente de linterna giratoria element.ui, puede asignarlo y modificarlo directamente: (Recuerde usar si hay un estilo en línea !important)
/* 走马灯每个item */
.el-carousel__item{
}
/* 走马灯当前展示的item */
.is-active{
}
/* 走马灯item的容器 */
.el-carousel__container{
}
/* 整个走马灯的容器，包含指示器等其它组件在内 */
.el-carousel{
}
2. La linterna giratoria se adapta dinámicamente al ancho y alto de la pantalla: (los detalles específicos se pueden ajustar según las necesidades)
1) Primero modifique el ancho del artículo:
.el-carousel__item{
width: 80%;
left: -15%;
}
2) Altura adaptable:
-
Agregue atributos de artículo dinámicos en la etiqueta del artículo:
:height=" bannerHeight + 'px' " -
Agregue los
bannerHeightatributos yscreenWidthatributos anteriores a los datos de VuebannerHeight : 100,//图片父容器的高度 screenWidth :0,//屏幕的宽度 -
Agregue un método para asignar dinámicamente estos dos valores en los datos:
- Obtenga el ancho de la pantalla en montado y asígnelo a screenWidth,
mounted:function() { this.screenWidth = window.innerWidth; this.setSize(); window.onresize = () =>{ this.screenWidth = window.innerWidth; this.setSize(); }; },- Calcule la altura dinámicamente en el método de métodos:
methods:{ setSize:function () { // 通过屏幕宽度(图片宽度)计算高度 this.bannerHeight = 400 / 1920 * this.screenWidth; }, }
3. Publique el código completo:
<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;
},
}
})