react滑块验证码

1. 图片效果
   1. 

       

2. css

    .simple-wrap{
       width: 270px;
       // height: 32px;
       margin-bottom:24px ;
   }
   .simple-verify{
       line-height: 42px;
       width: 320px;
       height: 42px;
       border-radius: 3px;
       border: 1px solid #d9d9d9;
       display: flex;
       flex-wrap: wrap;
       .simple-left{
           user-select: none;
           text-align: center;
           color: @white;
           border-radius: 3px 0 0 3px;
           height: 100%;
           width: 120px;
           width: 0;
       }
       .simple-slider{
           user-select: none;
           cursor: pointer;
           border-radius: 0 3px 3px 0;
           text-align: center;
           width: 55px;
           height: 100%;
           font-size: 20px;
           color: #666666;
           background-color: #E0E0E0;
       }
       .simple-right{
           user-select: none;
           text-align: center;
           color: #D7D7D7;
           width: 193px;
           height: 100%;
           border-radius: 0 3px 3px 0;
           background-color: @white;
           
       }
   } 
   

   　　

   　
3. 子组件

   import React, { useRef, useState, useEffect, MutableRefObject } from 'react';
   import '@/common/styles/simple-verify.less';
   import { Alert, Spin } from 'antd';
   import { LoadingOutlined } from '@ant-design/icons';
   export default function Slider(props: any) {
     const { showSlider } = props;
     // 显示隐藏
     const leftRef: MutableRefObject<any> = useRef();
     const rootRef: MutableRefObject<any> = useRef();
     const rightRef: MutableRefObject<any> = useRef();
     const centerRef: MutableRefObject<any> = useRef();
     const [successText, setSuccessText] = useState<any>('');
     const [textTitle, setTextTitle] = useState('请移动滑块至最右边');
     const [loading, setLoading] = useState(false);
     const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
     const lashen = (events: any) => {
       var mouseDownX = events.clientX; // 左边位置
       var Wl = leftRef.current.clientWidth;
       leftRef.current.style.backgroundColor = '#4BA7FE';
       rootRef.current.style.borderColor = '#4BA7FE';
       setSuccessText('');
       rootRef.current.onmousemove = function (event: { clientX: number }) {
         setTextTitle('');
         if (
           rootRef.current.offsetWidth -
             leftRef.current.offsetWidth -
             centerRef.current.offsetWidth -
             2 <
           1
         ) {
           setLoading(true);
           leftRef.current.style.width = 263 + 'px';
           rightRef.current.style.width = 0;
           leftRef.current.style.backgroundColor = '#76CD4B';
           rootRef.current.style.borderColor = '#76CD4B';
           setSuccessText('验证成功');
           props.resultClick(0);
           setTimeout(() => {
             setLoading(false);
           }, 500);
         } else {
           leftRef.current.style.width = event.clientX - mouseDownX + Wl + 'px';
           rightRef.current.style.width =
             rootRef.current.offsetWidth -
             leftRef.current.offsetWidth -
             centerRef.current.offsetWidth -
             2 +
             'px';
         }
       };
       rootRef.current.onmouseup = function () {
         if (
           rootRef.current.offsetWidth -
             leftRef.current.offsetWidth -
             centerRef.current.offsetWidth -
             2 >
           0
         ) {
           setLoading(true);
           leftRef.current.style.backgroundColor = '#F6535B';
           rootRef.current.style.borderColor = '#F6535B';
           props.resultClick(1);
           setTimeout(() => {
             rootRef.current.style.borderColor = '#d9d9d9';
             setTextTitle('请移动滑块至最右边');
             leftRef.current.style.width = 0;
             rightRef.current.style.width = 263 + 'px';
             setLoading(false);
           }, 500);
         }
         rootRef.current.onmousemove = null;
       };
     };
   
     useEffect(() => {
       if (!showSlider) {
         setSuccessText('');
         setLoading(false);
         setTextTitle('请移动滑块至最右边');
       }
     });
     return (
       <div className="simple-wrap">
         <Spin indicator={antIcon} spinning={loading}>
           {showSlider ? (
             <div ref={rootRef} className="simple-verify">
               <div ref={leftRef} className="simple-left">
                 {successText}
               </div>
               <div onMouseDown={lashen} ref={centerRef} className="simple-slider">
                 {'>>>'}
               </div>
               <div ref={rightRef} className="simple-right">
                 {textTitle}
               </div>
             </div>
           ) : null}
         </Spin>
       </div>
     );
   }
   

   　　

   　
4. 父组件

   import React,{useState} from 'react';
   
   
   import Slider from './slider';
   export default function Page1() {
      
       const [showSlider, setShowSlider] = useState(false)
       const showClick = () =>{
           setShowSlider(true)
       }
       const hidClick = () =>{
           setShowSlider(false)
       }
       const resultClick = (e:number)=>{
          if (e==0) {
           console.log('成功');
          setTimeout(() => {
           setShowSlider(false)
          }, 600);
           
          }else if(e==1){
           console.log('失败');
          }
       }
     return (
       <div>
           <button onClick={showClick}>显示</button>
           <button onClick={hidClick}>隐藏</button>
         <Slider showSlider={showSlider} resultClick={resultClick}></Slider>
       </div>
     );
   }