slider滑块，验证登录滑块

SlideToUnLock� 滑动验证

image.png

  1. import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from "react";
  2. import { func, number } from "prop-types";
  3. import styles from "./style.module.less";
  5. const SlideToUnLockRef = forwardRef(SlideToUnLock);
  7. SlideToUnLockRef.propTypes = {
  8.   onChange: func.isRequired,
  9.   height: number
  10. };
  11. SlideToUnLockRef.defaultProps = {
  12.   height: 32,
  13.   onChange: () => {}
  14. };
  16. export default SlideToUnLockRef
  18. function SlideToUnLock({ height, onChange }, ref) {
  19.   const rootRef = useRef();
  20.   // 滑块
  21.   const slideRef = useRef(null);
  22.   // 文字
  23.   const textRef = useRef("");
  24.   // 背景颜色
  25.   const bgRef = useRef(null);
  26.   const [title, setTitle] = useState("拖动滑块验证");
  28.   useEffect(init, []);
  30.   useImperativeHandle(ref, () => ({
  31.     reset: () => {},
  32.   }))
  34.   function init() {
  35.     if (!rootRef.current) {
  36.       return console.error("没有找到 slide DOM");
  37.     }
  39.     const MOVE_WIDTH = rootRef.current.offsetWidth - slideRef.current.offsetWidth; // 可以移动的距离
  41.     // 触发事件 onmousedown按下  onmousemove移动  onmouseup松开
  42.     slideRef.current.onmousedown = (e) => {
  43.       // e.clientX 鼠标点的位置
  44.       onMouseMove(e.clientX);
  45.     };
  47.     // 鼠标松开时
  48.     document.onmouseup = () => {
  49.       if (parseInt(slideRef.current.style.left) === MOVE_WIDTH) return;
  51.       // 松开后回到原点，清除移动事件
  52.       slideRef.current.style.left = 0;
  53.       bgRef.current.style.width = 0;
  54.       document.onmousemove = null;
  55.       textRef.current.classList.remove(styles.white);
  56.     };
  58.     // 拖拽移动时发生
  59.     function onMouseMove(clientX) {
  60.       document.onmousemove = (e) => {
  61.         e.preventDefault();
  62.         // 移动的X轴坐标 = 当前的 clientX - 之前鼠标的 clientX
  63.         const moveX = e.clientX - clientX;
  65.         // 可移动的范围 = 总宽度 - 按钮的宽度
  66.         if (moveX >= 0 && moveX <= MOVE_WIDTH) {
  67.           slideRef.current.style.left = moveX + "px"; // 滑块绝对定位
  68.           bgRef.current.style.width = (moveX + 20) + "px"; // 设备背景的宽度
  70.           if (moveX > MOVE_WIDTH / 2) {
  71.             textRef.current.classList.add(styles.white);
  72.           }
  73.         }
  75.         // 验证成功
  76.         if (moveX >= MOVE_WIDTH) {
  77.           slideRef.current.style.left = MOVE_WIDTH + "px"; // 滑块绝对定位
  78.           bgRef.current.style.width = (MOVE_WIDTH + 20) + "px"; // 设备背景的宽度
  79.           setTitle("验证成功");
  80.           onChange(true);
  82.           // 事件清除-按下、移动
  83.           slideRef.current.onmousedown = null;
  84.           slideRef.current.onmouseup = null;
  85.           document.onmousemove = null;
  86.         }
  87.       };
  88.     }
  89.   }
  91.   return (
  92.     <div
  93.       ref={rootRef}
  94.       className='relative flex items-center bg-slate-50 select-none rounded-md'
  95.       style={{ height }}
  96.     >
  97.       {/*滑块*/}
  98.       <div
  99.         ref={slideRef}
  100.         className={`h-full rounded-md absolute z-30 border-box ${styles.slide}`}
  101.       />
  103.       {/*拖动滑块验证文本*/}
  104.       <span
  105.         ref={textRef}
  106.         className={`text-xs text-slate-500 absolute z-20 bg-transparent ${styles.title}`}
  107.       >
  108.         {title}
  109.       </span>
  111.       {/*背景颜色*/}
  112.       <span
  113.         ref={bgRef}
  114.         className={`h-full rounded-l-md absolute z-10 ${styles.success}`}
  115.       />
  116.     </div>
  117.   );
  118. }

图片滑动拼图验证

https://blog.csdn.net/weixin_33729196/article/details/88624323

滑块验证

https://codepen.io/souporserious/pen/XJQLEb
https://gitee.com/mycssweb/react-simple-verify
image.png