设计网站官网国外_学视频剪辑大概需要多少钱_百度关键词推广_百度网址

• 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;}};