美文网首页
elementplus 进度条底色更改

elementplus 进度条底色更改

作者: 南土酱 | 来源:发表于2023-11-02 09:28 被阅读0次

    首先给不同的进度条 外加一层 div。以此区分不同的进度条

       <div class="piePass">
            <el-progress type="circle" :percentage="4" :stroke-width="10" color="#00B578">
              <template #default="{ percentage }">
                <div class="title">已通过</div>
                <div class="percentage-value base-font">{{ percentage }}</div>
              </template>
            </el-progress>
          </div>
        <div >
            <el-progress type="circle" :percentage="10" :stroke-width="10" color="#FF4A58">
              <template #default="{ percentage }">
                <div class="title">未通过</div>
                <div class="percentage-value base-font">{{ percentage }}</div>
              </template>
            </el-progress>
          </div>
    

    接着用 sass 来做 deep 进行强制修改即可

    <style scoped lang="scss">
    .piePass :deep() {
      path:first-child {
        stroke: red;
      }
    }
    
    image.png

    相关文章

      网友评论

          本文标题:elementplus 进度条底色更改

          本文链接:https://www.haomeiwen.com/subject/ntxnidtx.html