react可拖拽进度条的实现
效果
/*
* @Author: hongbin
* @Date: 2022-04-16 13:26:39
* @LastEditors: hongbin
* @LastEditTime: 2022-04-16 21:00:02
* @Description:拖动进度条组件
*/
import { FC, ReactElement, useRef } from "react";
import styled from "styled-components";
import { flexCenter } from "../../styled";
interface IProps {
/**
* 0-1
*/
value: number;
/**
* callback 0-1
*/
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 可拖拽进度条内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
相关文章
Yasmin
2021-05-01
Violet
2021-03-07
Elita
2023-05-17
Tani
2023-05-18
Viveka
2023-05-18
Karli
2023-05-18
Tia
2023-05-18
Miette
2023-07-20
Jacinda
2023-07-20
Nova
2023-07-20
Beth
2023-07-20
Viridis
2023-07-20
Georgia
2023-07-20
Shaine
2023-07-20
Isleta
2023-07-20
Jacinda
2023-07-20
Kathy
2023-07-20
Nita
2023-07-20