• (Carousel)解决：Element-ui 中 Carousel 走马灯的样式的修改问题

    Ⅰ、Element-ui 提供的组件与想要目标情况的对比：

    1、Element-ui 提供组件情况：

    其一、Element-ui 自提供的代码情况为(示例的代码，例子如下)：
    在这里插入图片描述

    // Element-ui 自提供的代码：
<template>
  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    代码地址：https://element.eleme.cn/#/zh-CN/component/carousel

    其二、页面的显示情况为：

    在这里插入图片描述

    Ⅱ、实现 Carousel 走马灯样式变化的过程：

    1、 Carousel 自提供的代码的实践：

    其一、代码为：

    <template>
    <div>
        <div style="font-weight:bolder; font-size:20px">走马灯的使用:</div>
        <div>
            <div style="margin:20px 0;">方法一：原本样式</div>
            <div class="block" style="width:50%;">
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in arrayList" :key="item">
                    <h3>{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arrayList:['王二','张三','李四','麻五']
        }
    }
}
</script>

<style lang="scss" scoped>
.block {
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 100px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  // 此时是：设置 carousel 走马灯的高度为：100px;
  /deep/.el-carousel__container {  
    height: 100px;
  }
}
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    其二、页面展示为：

    在这里插入图片描述

    2、 Carousel 代码相关属性的使用：

    其一、indicator-position(指示器) 属性的使用：

    A、代码：

    indicator-position="none"     //此时的指示器就不显示了；

indicator-position="outside"  //表示指示器在外面显示；
// 而默认不设置的指示器是在里面的；

    • 1
    • 2
    • 3
    • 4

    B、状态显示：

    //显示器不显示的情况:
    在这里插入图片描述

    //显示器在内部的情况：
    在这里插入图片描述

    //显示器在外部的情况：
    在这里插入图片描述

    其二、arrow(箭头) 属性的使用：

    A、代码：

    arrow="always"     //此时是：箭头一直显示；

arrow="never"     //此时是：箭头不再显示；

// 默认是 hover 时箭头才显示(即：不设置 arrow 属性时)

    • 1
    • 2
    • 3
    • 4
    • 5

    B、状态显示：

    //箭头一直显示的情况:

    在这里插入图片描述

    //箭头不显示的情况:
    在这里插入图片描述

    //箭头 hover 时显示的情况(即：此时仅 hover 时才显示箭头):

    在这里插入图片描述

    其三、direction(方向) 属性的使用：

    A、代码：

    direction="vertical"  //此时表示：让走马灯在垂直方向上显示；

 //而默认是：走马灯在水平方向上显示；

    • 1
    • 2
    • 3

    B、状态显示：

    // 走马灯在水平方向上显示为：

    在这里插入图片描述

    // 走马灯在垂直方向上显示为：

    在这里插入图片描述

    其四、autoplay(是否自动播放) 属性的使用：

    :autoplay="false"   //此时表示是：非自动播放；

//而默认是：自动播放；

    • 1
    • 2
    • 3

    3、 Carousel 代码相关样式修改的过程：

    其一、走马灯高度设置：

      /deep/.el-carousel__container {
      height: 60px;  
    }


    • 1
    • 2
    • 3
    • 4

    其二、设置 item 背景色：

    /deep/.el-carousel {
    .el-carousel__item {
      background-color: #ccc;  //设置每一个 item 待切换页面的背景色;
      margin-top: 0px;
    }
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    其三、调整箭头大小：

     /deep/.el-carousel__arrow{
    font-size: 20px;
  }

    • 1
    • 2
    • 3

    其四、调整箭头的位置：

    /deep/.el-carousel__arrow--left,
  /deep/.el-carousel__arrow--right{
    background-color: transparent !important; // 此时是将其外面的圆框变成透明(即：彻底消失);
    position: relative;
    top: 7px;
  }
  /deep/.el-carousel__arrow--left {
      left: 20px;
  }
  /deep/.el-carousel__arrow--right {
      left: 80px;
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    3、 Carousel 代码相关样式修改的整体代码为：

    其一、代码为：

    <template>
    <div>
        <div>
            <div style="margin:20px 0;">方式二：修改后的样式</div><!-- 可以通过该 div 调整走马灯的位置; -->
            <div class="project" style="width:80%;margin-top:20px;"><!-- 通过外层的 project 类来调整走马灯的位置; -->
                <el-carousel :interval="5000" arrow="none" indicator-position="none" style="margin-top:20px;">
                  <!-- 也可以通过 el-carousel 的设置 style 属性来调整走马灯的位置; -->
                    <el-carousel-item v-for="item in arrayList" :key="item">
                    <h3>{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arrayList:['王二','张三','李四','麻五']
        }
    }
}
</script>

<style lang="scss" scoped>
.project {
  //下面代码：此时是调整 arrayList 值的大小和位置；
  .el-carousel__item h3 {
    line-height: 60px;   //此时是调整 arrayList 的值上下位置;
    text-align: center;  //此时是使 arrayList 的值居中;
    font-size: 18px;
    opacity: 0.75;
  }

  //下面代码：此时是调整走马灯的高度，但设置不了盒子上面的距离(暂时没找到合适的 css 位置)；
  /deep/.el-carousel__container {
      height: 60px;  
    }

  /deep/.el-carousel {
    .el-carousel__item {
      background-color: #ccc;  //设置每一个 item 待切换页面的背景色;
      margin-top: 0px;
    }
  }

  //下面代码：此时是调整箭头的大小;
  /deep/.el-carousel__arrow{
    font-size: 20px;
  }

  //下面代码：此时是调整箭头的位置; 
  /deep/.el-carousel__arrow--left,
  /deep/.el-carousel__arrow--right{
    background-color: transparent !important; // 此时是将其外面的圆框变成透明(即：彻底消失);
    position: relative;
    top: 7px;
  }
  /deep/.el-carousel__arrow--left {
    left: 20px;
  }
  /deep/.el-carousel__arrow--right {
    left: 80px;
  }
}
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68

    其二、页面显示为：

    在这里插入图片描述

    Ⅲ、实现 Carousel 走马灯样式的整体代码与显示结果：

    1、整体代码为：

    <template>
    <div>
        <div style="font-weight:bolder; font-size:20px">走马灯的使用:</div>
        <div>
            <div style="margin:20px 0;">方法一：原本样式</div>
            <div class="block" style="width:50%;">
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in arrayList" :key="item">
                    <h3>{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div>
            <div style="margin:20px 0;">方式二：修改后的样式</div><!-- 可以通过该 div 调整走马灯的位置; -->
            <div class="project" style="width:80%;margin-top:20px;"><!-- 通过外层的 project 类来调整走马灯的位置; -->
                <el-carousel :interval="5000" arrow="none" indicator-position="none" style="margin-top:20px;">
                  <!-- 也可以通过 el-carousel 的设置 style 属性来调整走马灯的位置; -->
                    <el-carousel-item v-for="item in arrayList" :key="item">
                    <h3>{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arrayList:['王二','张三','李四','麻五']
        }
    }
}
</script>

<style lang="scss" scoped>
.block {
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 100px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  /deep/.el-carousel__container {
    height: 100px;
  }
}
.project {
  //备用代码： 可能需要的 hover 状态;
  // &:hover {
    // /deep/.el-carousel__arrow--left,
    // /deep/.el-carousel__arrow--right{
    //     background-color: transparent !important;
    //     position: relative;
    //     top: 7px;
    // }
    // /deep/.el-carousel__arrow--left {
    //   left: -67px;
    // }
    // /deep/.el-carousel__arrow--right {
    //   right: -67px;
    // }
  // }

  //下面代码：此时是调整 arrayList 值的大小和位置；
  .el-carousel__item h3 {
    line-height: 60px;   //此时是调整 arrayList 的值上下位置;
    text-align: center;  //此时是使 arrayList 的值居中;
    font-size: 18px;
    opacity: 0.75;
  }

  //下面代码：此时是调整走马灯的高度，但设置不了盒子上面的距离(暂时没找到合适的 css 位置)；
  /deep/.el-carousel__container {
      height: 60px;  
    }

  /deep/.el-carousel {
    .el-carousel__item {
      background-color: #ccc;  //设置每一个 item 待切换页面的背景色;
      margin-top: 0px;
    }
  }

  //下面代码：此时是调整箭头的大小;
  /deep/.el-carousel__arrow{
    font-size: 20px;
  }

  //下面代码：此时是调整箭头的位置; 
  /deep/.el-carousel__arrow--left,
  /deep/.el-carousel__arrow--right{
    background-color: transparent !important; // 此时是将其外面的圆框变成透明(即：彻底消失);
    position: relative;
    top: 7px;
  }
  /deep/.el-carousel__arrow--left {
    left: 20px;
  }
  /deep/.el-carousel__arrow--right {
    left: 80px;
  }
}

</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114

    2、显示结果为：

    在这里插入图片描述

    Ⅳ、小结：

    其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
    其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

  • 相关阅读:
    真棒啊，Facebook 官方推出一个模型解释 & 可视化工具 Captum
    Linux的hwclock命令笔记221110
    干货 | 基于深度学习的生态保护红线和生态空间管控区域内开发建设活动识别...
    开发实用篇——数据层解决方案
    李宏毅hw-6利用GAN生成动漫图像
    IDEA01：Maven环境配置
    centos7迁移gitlab（基于docker）
    基于WEB的学历信息征信系统设计与实现
    Java Tomcat内存马——Servlet内存马
    《工程伦理与学术道德》之《工程与伦理》
  • 原文地址：https://blog.csdn.net/weixin_43405300/article/details/126802991