/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-11-07 17:47:28
|
* @LastEditTime: 2024-09-19 10:57:46
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 滑动验证组件
|
*/
|
import React, { useEffect, useRef } from 'react';
|
import './index.less';
|
import { DoubleRightOutlined } from '@ant-design/icons';
|
|
const SlideTest = ({ onSuccessCallback }) => {
|
const slideRef = useRef();
|
|
const boxRef = useRef();
|
|
const successRef = useRef();
|
|
useEffect(() => {
|
// setLeftWidth();
|
// 验证成功的距离
|
const distance = boxRef.current.clientWidth - 60;
|
let success = false;
|
slideRef.current.onmousedown = (eve) => {
|
const e = eve || window.event;
|
let downX = e.clientX;
|
document.onmousemove = (eve) => {
|
const e = eve || window.event;
|
let moveX = e.clientX;
|
let offsetX = moveX - downX;
|
if (offsetX > distance) {
|
offsetX = distance;
|
} else if (offsetX < 0) {
|
offsetX = 0;
|
}
|
slideRef.current.style.left = offsetX + 'px';
|
successRef.current.style.width = offsetX + 'px';
|
if (offsetX == distance) {
|
onSuccessCallback && onSuccessCallback();
|
success = true;
|
successRef.current.innerHTML = '验证通过';
|
document.onmousemove = null;
|
}
|
};
|
};
|
document.onmouseup = () => {
|
if (success) {
|
if (slideRef.current) {
|
slideRef.current.onmousedown = null;
|
}
|
document.onmouseup = null;
|
} else {
|
slideRef.current.style.left = 0;
|
successRef.current.style.width = 0;
|
successRef.current.innerHtml = '';
|
document.onmousemove = null;
|
}
|
};
|
return () => {
|
document.onmouseup = null;
|
};
|
}, []);
|
|
return (
|
<div className="slideTest-init" ref={boxRef}>
|
<div className="slideTest-success" ref={successRef} />
|
<div className="slideTest-slide" ref={slideRef}>
|
<DoubleRightOutlined style={{color:'rgba(0, 0, 0, 0.65)'}}/>
|
</div>
|
</div>
|
);
|
};
|
|
export default SlideTest;
|
