本文小编为大家详细介绍“react可拖拽进度条怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“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可拖拽进度条怎么实现”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。