Vue ElementUI el-carousel 走马灯 指示灯样式修改

Carousel 走马灯

一、原始样式 

二、修改后

三、代码

<template>
    <div>
        <el-carousel height="250px" >
            <el-carousel-item v-for="item in 4" :key="item">
                <h3 class="small">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<style lang="stylus" scoped>
.el-carousel {
    width: 500px;
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    /deep/ .el-carousel__indicators {// 指示器
        left: unset;
        transform: unset;
        right: 2%;
    }
    /deep/ .el-carousel__button {// 指示器按钮
        width: 10px;
        height: 10px;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.2);
    }
    /deep/ .is-active .el-carousel__button {// 指示器激活按钮
        background: #3f8ec8;
    }

    /deep/ .el-carousel__container {
        height: 100%;
    }
}
</style>

知识点：

1. 代码第 20 - 34 行，为指示器 css 设置
2. 代码第 20、25、32 行，使用关键字 /deep/，表示改变 element-ui 组件深层次样式；
3. 代码第 21、22 行，使用关键字 unset，表示重置；