fix(captcha): 修复滑块验证码在桌面端无法使用的问题
- 兼容触摸事件和鼠标事件,支持移动端和桌面端 - 添加鼠标移动、鼠标抬起和鼠标离开事件处理 - 修复坐标获取逻辑,统一处理触摸和鼠标坐标 - 移除调试日志,优化控制台输出 - 添加环境判断,生产环境不加载vConsole
This commit is contained in:
parent
eaddca0d83
commit
ddf2fe3751
@ -69,8 +69,10 @@ function App({ children }: PropsWithChildren<any>) {
|
|||||||
root.render(<TabBar />);
|
root.render(<TabBar />);
|
||||||
|
|
||||||
// 初始化vConsole调试工具
|
// 初始化vConsole调试工具
|
||||||
const VConsole = require("vconsole");
|
if (process.env.NODE_ENV === "development") {
|
||||||
new VConsole();
|
const VConsole = require("vconsole");
|
||||||
|
new VConsole();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -164,12 +164,13 @@ class Captcha extends Component {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 鼠标移动时的事件处理函数
|
// 鼠标/触摸移动时的事件处理函数
|
||||||
move = (e) => {
|
move = (e) => {
|
||||||
console.log(e, "滑动滑动");
|
console.log(e, "滑动滑动");
|
||||||
if (this.state.status && !this.state.isEnd) {
|
if (this.state.status && !this.state.isEnd) {
|
||||||
console.log(e.touches[0].pageX);
|
// 兼容触摸事件和鼠标事件
|
||||||
let x = e.touches[0].pageX; // 获取鼠标/触摸点的X坐标
|
let x = e.touches ? e.touches[0].pageX : e.pageX; // 获取鼠标/触摸点的X坐标
|
||||||
|
console.log(x);
|
||||||
let bar_area_left = this.state.barAreaLeft; // 滑块区域左侧距离
|
let bar_area_left = this.state.barAreaLeft; // 滑块区域左侧距离
|
||||||
let move_block_left = x - bar_area_left; // 计算移动块的左侧距离
|
let move_block_left = x - bar_area_left; // 计算移动块的左侧距离
|
||||||
console.log(
|
console.log(
|
||||||
@ -355,7 +356,10 @@ class Captcha extends Component {
|
|||||||
onTouchStart={this.start}
|
onTouchStart={this.start}
|
||||||
onMouseDown={this.start}
|
onMouseDown={this.start}
|
||||||
onTouchMove={this.move}
|
onTouchMove={this.move}
|
||||||
|
onMouseMove={this.move}
|
||||||
onTouchEnd={this.end}
|
onTouchEnd={this.end}
|
||||||
|
onMouseUp={this.end}
|
||||||
|
onMouseLeave={this.end}
|
||||||
style={{
|
style={{
|
||||||
width: barSize.height,
|
width: barSize.height,
|
||||||
height: barSize.height,
|
height: barSize.height,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user