带有“text-inside”属性 CSS 的进度条

问题描述

有人可以帮我处理 progress 库的以下 Element UI 元素吗： 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;
  }

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

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

谢谢。

解决方法

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

HTML

Bottom

CSS

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

我找不到有关 .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; } 库及其样式的一些信息。

html