百分比组件 - elementui改动

最新推荐文章于 2024-06-15 10:00:31 发布

EstherNi

最新推荐文章于 2024-06-15 10:00:31 发布

阅读量757

点赞数 11

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/EstherNi/article/details/135056143

版权

文章详细描述了如何在使用Vue的ElementUI库中的Slider组件时，定制其在disabled状态下的视觉效果，包括背景颜色、边框和按钮样式。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<el-slider v-model="value2" style="width: 87%;position: absolute;bottom: 9px;" disabled :show-tooltip="false"></el-slider>
 
value2: 0,

// 百分比条
::v-deep .el-slider__runway.disabled .el-slider__bar {
  background-color: #73b704;
  height: 10px;
  border-radius: 50000000000px;
}
::v-deep .el-slider__runway {
  border-radius: 50000000000px;
}
::v-deep .el-slider__runway.disabled .el-slider__button {
  border: solid 4px #73b704;
  width: 23.5px;
  height: 23.5px;
  // transform: translateY(5px);
}
::v-deep .el-slider__runway {
  height: 10px;
}