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

  return (
    
      

        

      
      
 {
          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 + "%" }}
      >
    
  );
};

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 可拖拽进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！