经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » React » 查看文章
react 可拖拽进度条的实现
来源:jb51  时间:2022/4/18 10:11:09  对本文有异议

效果

请添加图片描述

  1. /*
  2. * @Author: hongbin
  3. * @Date: 2022-04-16 13:26:39
  4. * @LastEditors: hongbin
  5. * @LastEditTime: 2022-04-16 21:00:02
  6. * @Description:拖动进度条组件
  7. */
  8.  
  9. import { FC, ReactElement, useRef } from "react";
  10. import styled from "styled-components";
  11. import { flexCenter } from "../../styled";
  12.  
  13. interface IProps {
  14. /**
  15. * 0-1
  16. */
  17. value: number;
  18. /**
  19. * callback 0-1
  20. */
  21. onChange: (percent: number) => void;
  22. }
  23.  
  24. const ProgressBar: FC<IProps> = ({ value, onChange }): ReactElement => {
  25. const totalRef = useRef<HTMLDivElement>(null);
  26.  
  27. return (
  28. <Container>
  29. <div ref={totalRef}>
  30. <div style={{ width: value * 100 + "%" }} />
  31. </div>
  32. <div
  33. onMouseDown={(e) => {
  34. const { offsetWidth } = totalRef.current!;
  35. const stop = e.currentTarget;
  36. const { offsetLeft } = stop;
  37. stop.style["left"] = offsetLeft + "px";
  38. const { pageX: start } = e;
  39. const move = (e: MouseEvent) => {
  40. let val = offsetLeft + e.pageX - start;
  41. if (val <= 0) val = 0;
  42. if (val >= offsetWidth) val = offsetWidth;
  43. // stop.style["left"] = val + "px";
  44. onChange(val / offsetWidth);
  45. };
  46.  
  47. const clear = () => {
  48. document.removeEventListener("mousemove", move);
  49. document.removeEventListener("mouseup", clear);
  50. document.removeEventListener("mouseleave", clear);
  51. };
  52. document.addEventListener("mousemove", move);
  53. document.addEventListener("mouseup", clear);
  54. document.addEventListener("mouseleave", clear);
  55. }}
  56. style={{ left: value * 100 + "%" }}
  57. ></div>
  58. </Container>
  59. );
  60. };
  61.  
  62. export default ProgressBar;
  63.  
  64. const Container = styled.div`
  65. position: relative;
  66. width: 10vw;
  67. height: 1vw;
  68. ${flexCenter};
  69. & > :first-child {
  70. width: inherit;
  71. height: 0.5vw;
  72. background-color: var(--tint-color);
  73. border-radius: 10vw;
  74. overflow: hidden;
  75. display: flex;
  76. align-items: center;
  77. padding: 0.05vw;
  78. div {
  79. width: 5vw;
  80. height: 0.4vw;
  81. background-color: var(--deep-color);
  82. border-radius: 0.4vw;
  83. }
  84. }
  85. & > :last-child {
  86. width: 1vw;
  87. height: 1vw;
  88. background-color: var(--deep-color);
  89. border-radius: 1vw;
  90. position: absolute;
  91. cursor: pointer;
  92. transform: translateX(-0.5vw);
  93. svg {
  94. width: 0.9vw;
  95. }
  96. }
  97. `;
  98.  
  1. export const flexCenter = css`
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. `;
  1. :root {
  2. --deep-color: #978961;
  3. --tint-color: #efe5d4;
  4. }

到此这篇关于react 可拖拽进度条的实现的文章就介绍到这了,更多相关react 可拖拽进度条内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号