一、概述
因项目需求,需要增加轮播图,官方demo效果如下:
但这个不是我们想要的,我们需要的是这样的。
二、代码实现
需要在原有的基础上,修改页面样式才行。
test.vue
<template>
<div style="width: 700px">
<el-carousel indicator-position="outside">
<el-carousel-item v-for="(item,index) in specImages" :key="index">
<img :src="item" style="width: 100%; height: 100%;"/>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: "Carousel",
data() {
return {
specImages: ["https://scpic.chinaz.net/files/default/imgs/2022-11-02/ef0e4bab22a08494.jpg"
, "https://scpic.chinaz.net/files/default/imgs/2022-10-16/d34367f413668279.jpg"
, "https://scpic.chinaz.net/files/default/imgs/2022-10-06/8105db2afe794e65.jpg"
, "https://scpic.chinaz.net/files/default/imgs/2022-09-01/720b9ab754f90f6e.jpg"
, "https://scpic.chinaz.net/files/default/imgs/2022-10-21/47fa6f662157326f.jpg"
]
}
},
methods: {
// 将轮播图指示器渲染成图片
indicatorToimage: function () {
var a = document.querySelectorAll(".el-carousel__button");
for (let i in this.specImages) {
//添加一个img
let img = document.createElement('img');
img.src = this.specImages[i];
if (i == this.specImages.length - 1) {
a[i].className = a[i].className + ' last-carousel-img';
}
a[i].append(img)
}
},
},
mounted() {
//在完全加载后再执行函数
this.$nextTick(() => this.indicatorToimage());
}
}
</script>
<style scoped>
/deep/ .el-carousel__indicator--horizontal {
display: inline-block;
padding: 10px 4px;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
/*button{*/
/* width: 100px !important;*/
/* height: 100px !important;*/
/*}*/
/*设置略缩图片样式*/
/deep/ .el-carousel__indicators{
display: flex !important;
flex-wrap: nowrap !important;
}
/deep/ .el-carousel__button{
width: 100%;
height: 99px;
background: none;
padding-right: 10px;
}
/deep/ .el-carousel__indicator{
padding-left: 0;
padding-right: 0;
flex: 1;
}
/deep/ .el-carousel__button img {
width: 100%;
height: 100%;
}
/deep/ .last-carousel-img{
float: right;
padding: 0;
}
</style>
访问页面,效果同上!
所有评论(0)