一、概述
因项目需求,需要增加轮播图,官方demo效果如下:
但这个不是我们想要的,我们需要的是这样的。
二、代码实现
需要在原有的基础上,修改页面样式才行。
test.vue
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>View Code
访问页面,效果同上!
标签:__,el,轮播,img,ElementUI,default,deep,carousel From: https://www.cnblogs.com/xiao987334176/p/16901016.html