分段评级滑块功能![带分数的评级设置](https://i-blog.csdnimg.cn/blog_migrate/0ebbffbb9304449d13583ba42c7fadc0.png#pic_center)
鼠标点击圆点滑动事件
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>
);
}