- GoCaptcha：https://github.com/wenlng/go-captcha
- GoCaptcha 文档：http://gocaptcha.wencodes.com
- vue文档地址：GitHub - wenlng/go-captcha-vue: 🖖 GoCaptcha for Vue, which implements click mode, slider mode, drag-drop mode and rotation mode.
效果：
后端需要返回对应的数据：
对应配置为：
const getCaptcha = async () => {try {const res = await getCaptchaApi({ username: '' });captchaData.value = {thumbX: res.x,thumbY: res.y,thumbWidth: res.w,thumbHeight: res.h,image: res.master,thumb: res.tile};formData.captcha_id = res.captcha_id;console.log('验证码数据:', captchaData.value);} catch (error) {console.error('获取验证码失败:', error);ElMessage.error('获取验证码失败，请重试');}};SlideRegionConfig配置为：
const SlideRegionConfig = reactive({width: 300,height: 220,thumbWidth: 62,thumbHeight: 62,verticalPadding: 10,horizontalPadding: 10,showTheme: true,title: '向右滑动完成验证',iconSize: 20,scope: true});slideEvents事件为：
// 滑动验证事件配置const slideEvents = {// 滑块移动事件move: (x: number, y: number) => {console.log('滑块移动:', x, y);},// 刷新验证码refresh: async () => {await getCaptcha();},// 关闭验证码close: () => {showSlider.value = false;},// 验证确认confirm: (point: SlidePoint, reset: () => void): boolean => {console.log('验证确认:', point);// 将point转为字符串const pointStr = `${point.x},${point.y}`;formData.captcha = pointStr;showSlider.value = false;//这里更具自己的逻辑handleLogin();return true;}};
