elementui el-progress进度条尾端自定义图片

效果图:
elementui el-progress进度条尾端自定义图片_第1张图片

 实现思路就是在进度条自定义的百分比文字显示部分添加背景图片,然后把文字隐藏。

 css实现:

      /deep/ .el-progress {
        .el-progress-bar__outer {
          background: rgba(255, 168, 0, 0.16);
          border: 1px solid #ffa800;
          border-radius: 7px;
          height: 8px !important;
          position: absolute;
          left: 0;
          right: 0;
          z-index: 1;
          overflow: visible; // 关键
        }
        .el-progress-bar__inner {
          position: absolute;
          height: 8px;
          background: linear-gradient(90deg, #ffa800 0%, #ffdd86 100%);
          &::after {
            display: block;
          }
        }
        .el-progress-bar__innerText {
          display: block;
          width: 20px;
          height: 35px !important;
          float: right;
          background-image: url("../../assets/countryScreen/yd.png");
          background-size: 100% 100%;
          margin: -14px -10px;
          position: absolute;
          right: 0;
          font-size: 0;
        }
      }

你可能感兴趣的:(elementui,vue.js,前端)