效果 import { FC, ReactElement, useRef } from "react"; import styled from "styled-componen
效果
import { FC, ReactElement, useRef } from "react";
import styled from "styled-components";
import { flexCenter } from "../../styled";
interface IProps {
value: number;
onChange: (percent: number) => void;
}
const ProgressBar: FC<IProps> = ({ value, onChange }): ReactElement => {
const totalRef = useRef<htmlDivElement>(null);
return (
<Container>
<div ref={totalRef}>
<div style={{ width: value * 100 + "%" }} />
</div>
<div
onMouseDown={(e) => {
const { offsetWidth } = totalRef.current!;
const stop = e.currentTarget;
const { offsetLeft } = stop;
stop.style["left"] = offsetLeft + "px";
const { pageX: start } = e;
const move = (e: MouseEvent) => {
let val = offsetLeft + e.pageX - start;
if (val <= 0) val = 0;
if (val >= offsetWidth) val = offsetWidth;
// stop.style["left"] = val + "px";
onChange(val / offsetWidth);
};
const clear = () => {
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", clear);
document.removeEventListener("mouseleave", clear);
};
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", clear);
document.addEventListener("mouseleave", clear);
}}
style={{ left: value * 100 + "%" }}
></div>
</Container>
);
};
export default ProgressBar;
const Container = styled.div`
position: relative;
width: 10vw;
height: 1vw;
${flexCenter};
& > :first-child {
width: inherit;
height: 0.5vw;
background-color: var(--tint-color);
border-radius: 10vw;
overflow: hidden;
display: flex;
align-items: center;
padding: 0.05vw;
div {
width: 5vw;
height: 0.4vw;
background-color: var(--deep-color);
border-radius: 0.4vw;
}
}
& > :last-child {
width: 1vw;
height: 1vw;
background-color: var(--deep-color);
border-radius: 1vw;
position: absolute;
cursor: pointer;
transfORM: translateX(-0.5vw);
svg {
width: 0.9vw;
}
}
`;
export const flexCenter = CSS`
display: flex;
justify-content: center;
align-items: center;
`;
:root {
--deep-color: #978961;
--tint-color: #efe5d4;
}
到此这篇关于react 可拖拽进度条的实现的文章就介绍到这了,更多相关react 可拖拽进度条内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: react可拖拽进度条的实现
本文链接: https://www.lsjlt.com/news/146260.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0