一、概述
因項目需求,需要增加輪播圖,官方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>
訪問頁面,效果同上!