526互联

Element plus Carousel 修改指示器样式

发布时间 2023-07-19 11:19:35作者: 一文搞懂

在Vue的<style>标签中，使用/deep/选择器是不推荐的，因为它已经被废弃了。取而代之的是使用>>>或::v-deep选择器来代替/deep/选择器。

思路：通过::v-deep找到标签，通过伪类添加需要的样式：

 

// 滚动窗口底部的指示器
.el-carousel ::v-deep .el-carousel__indicators--outside li button{
    height: 20px;
}
.el-carousel ::v-deep .el-carousel__indicators--outside li:nth-child(1) button::after {
  content: "1";
}

.el-carousel ::v-deep .el-carousel__indicators--outside li:nth-child(2) button::after {
  content: "2";
}

.el-carousel ::v-deep .el-carousel__indicators--outside li:nth-child(3) button::after {
  content: "3";
}