带有'text-inside'属性CSS的进度条答案

【问题标题】：Progress bar with 'text-inside' attribute CSS带有'text-inside'属性CSS的进度条
【发布时间】：2021-09-20 19:52:23
【问题描述】：

有人可以帮助我处理Element UI 库的以下progress 元素： Element UI - Progress link

我试图达到这个结果：将值放在每个条的末尾

目前，有这个：使用以下代码：

HTML：

<el-progress :text-inside="true" :percentage="item.value" color="#6A7EC7" :stroke- 
width="12"></el-progress>

CSS：

.el-progress-bar__outer {
    background-color: transparent;
  }

我尝试将文本 div 设置为 relative，如下所示：

  >>> .el-progress-bar__innerText {
      color: $color-tremor-black;
      position: relative;
      left: 30px;
  }

但是当值接近结尾时，文本被剪切。

我错过了什么？需要做什么？

谢谢。

【问题讨论】：

标签： html css element-ui

【解决方案1】：

我决定删除这个组件并使用 div 和 CSS 构建我自己的进度条。像下面这样：

HTML

<div class="newProgress">
  <div class="progressBar" :style="{width:`${item.value}%`}"></div>
  <span class="newProgressValue">{{item.value}}%</span>
</div>

CSS

.newProgress {
  display: flex;
  flex-direction: row;
  width: 400px;
}

.progressBar {
  width: 80%;
  margin: 3px 0px 0px 10px;
  background: #6A7EC7;
  border: 1px solid #6A7EC7;
  height: 12px;
  border-radius: 50px;
}
.newProgressValue {
  padding-left: 5px;
  font-size: $font-size-small-plus;
}

我找不到有关Element UI 库及其样式的信息。

【讨论】：