elementui 进度条 el-progress 可拖动

进度条为0-100，如果需要其他的范围，需要调整进度条宽度或者自己算

            <div
              class="col2-5"
              @mousedown="mouseDown(this, item)"
              @mouseup="mouseUp"
              @mousemove="mouseMove"
            >
              <div>
                <el-progress
                  :text-inside="true"
                  :stroke-width="18"
                  :percentage="item.discount"
                ></el-progress>
              </div>
            </div>

  // 滑动进度条
    mouseDown(e, row) {
      this.curpercentRow = row;
      this.mouseState = true;
    },
    mouseUp(e) {
      this.mouseState = false;
    },
    mouseMove(e) {
      if (this.mouseState) {
        let lastval = this.curpercentRow.discount;
        if (e.layerX > 100) {
          if (lastval < 50) {
            this.curpercentRow.discount = 0;
          } else {
            this.curpercentRow.discount = 100;
          }
        } else {
          this.curpercentRow.discount = e.layerX;
        }
      }
    },

  .col2-5 {
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    > div {
      width: 100px;
      cursor: pointer;
      user-select: none;
    }
  }