拖拽进度条react的实现

冷不防 2023-09-26 19:56 123阅读 0赞

先来看看效果图

![在这里插入图片描述][f983ede6210f40408e2db6ea64d1fbcc.gif]

/\*

*  @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 = (\{ value, onChange \}): ReactElement => \{  
const totalRef = useRef(null);

return (

<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);  
\};

);  
\};

export default ProgressBar;

export const flexCenter = css`display: flex; justify-content: center; align-items: center;`;  
:root \{  
–deep-color: \#978961;  
–tint-color: \#efe5d4;  
\}

[f983ede6210f40408e2db6ea64d1fbcc.gif]: https://img-blog.csdnimg.cn/f983ede6210f40408e2db6ea64d1fbcc.gif