做个等级式滑块

分段评级滑块功能

鼠标点击圆点滑动事件

  setLeftForIndex = (index, p) => (p || this.state.pldata).slice(0, index).reduce((total, num) => total + num, 0);

  onMouseDown = (e, index) => {
    const { isBtn } = this.context;
    const { pldata } = this.state;
    if (!isBtn) {
      e.persist();
      // console.log(this[`action-bar${index}`], index);
      const dom = this[`action-bar${index}`];
      const rightDom = this[`action-bar${index + 1}`];
      // const domAfterLeft = (index + 2) !== pldata.length ? this[`action-bar${index + 2}`].offsetLeft : this.silderWidth;
      const domBtn = this[`action-block${index}`];
      const disX = e.clientX;
      // const domLeft = dom.offsetLeft;
      const domWidth = dom.clientWidth;
      const rightDomWidth = rightDom.clientWidth;
      const rightDomLeft = rightDom.offsetLeft;
      const domBtnLeft = domBtn.offsetLeft + 10;
      document.onmousemove = (ev) => {
        const left = ev.clientX - disX;
        const p = [...pldata];
        p[index] = Math.floor(((domWidth + left) / this.silderWidth) * 100);
        p[index + 1] = 100 - p.reduce((total, num, idx) => (idx === (index + 1) ? total : (total + num)), 0);
        if ((index === 0 && p[index] <= 29) 
				|| this.setLeftForIndex(index + 1, p) <= this.setLeftForIndex(index, p) 
				|| this.setLeftForIndex(index + 1, p) >= ((index + 2) !== p.length ? this.setLeftForIndex(index + 2, p) : 100)) {
          return false;
        }
        dom.style.width = `${p[index]}%`;
        rightDom.style.width = `${Math.ceil(((rightDomWidth - left) / this.silderWidth) * 100)}%`;
        rightDom.style.left = `${Math.floor(((rightDomLeft + left) / this.silderWidth) * 100)}%`;
        domBtn.style.left = `calc(${Math.floor(((domBtnLeft + left) / this.silderWidth) * 100)}% - 10px )`;
        console.log(p);
        this.setState({ pldata: p });
        return false;
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
    return false;
  };

  render() {
    const { isBtn, topvisible = false } = this.context;
    const { colors, pldata } = this.state;
    return (
      <div className="scroll-bar" style={{ width: this.silderWidth, opacity: isBtn ? '0.5' : 1 }}>
        <div className="entire-bar" style={{ backgroundColor: colors[4] }} />
        {topvisible
          && pldata.map((item, index) => (
            <>
              <div className="action-bar" ref={(inner) => this[`action-bar${index}`] = inner} style={{ width: `${item}%`, left: `${this.setLeftForIndex(index)}%`, backgroundColor: colors[index] }} />
              {
                (index + 1) !== pldata.length && (
                  <Tooltip 
                    visible={topvisible}
                    placement={(index % 2) === 0 ? 'top' : 'bottom'}
                    title={`${pldata[index] ? pldata.slice(0, index + 1).reduce((x, y) => Number(x) + Number(y)) : this.setLeftForIndex(index)}分`}>
                    <div 
                      ref={(inner) => this[`action-block${index}`] = inner}
                      onMouseDown={(e) => this.onMouseDown(e, index)}
                      style={{ left: `calc(${this.setLeftForIndex(index + 1)}% - 10px)`, borderColor: colors[index] }} 
                      className="action-block" />
                  </Tooltip>
                )
              }
            </>
          ))}
      </div>
    );
  }