ElementUI 轮播图

最新推荐文章于 2024-10-12 09:39:51 发布

shykevin

最新推荐文章于 2024-10-12 09:39:51 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签： elementui vue.js javascript 前端 ecmascript

本文链接：https://blog.youkuaiyun.com/shykevin/article/details/128739517

文章介绍了如何在Vue.js项目中对默认轮播图组件进行样式修改，以达到特定的需求。通过在`test.vue`文件中调整`<template>`、`<script>`和`<style>`部分，实现了包括指示器在内的轮播图效果个性化，将指示器改为图片形式并调整了背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

因项目需求，需要增加轮播图，官方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>

View Code

访问页面，效果同上！