第一步：
Git地址：tianai-captcha-demo: 滑块验证码demo
找到目录src/main/resources/static,拷贝 static 并改名为 tac 即可。
第二步：
将改为tac 的文件，放进项目根目录中，如下图：
第三步：
点击链接：https://minio.tianai.cloud/public/static/captcha/js/load.min.js
将里面的内容拷贝下来，创建load.min.js 文件 在 tac/js/load.min.js。
第四步：
会报初始化的错误：初始化tac失败 referenceerror: tac is not defined
解决方法：
1、下载 rollup-plugin-copy依赖：yarn add rollup-plugin-copy --save-dev
我这边用的是yarn，npm的话是：npm installrollup-plugin-copy --save-dev
成功如下图：
2、在vite.config.ts 文件中，在build中加入以下配置：
import copyPlugin from 'rollup-plugin-copy';
export default defineConfig(({ mode }) =>{return {build: {rollupOptions: {plugins: [copyPlugin({targets: [{ src: 'tac/*', dest: 'dist/tac' }],hook: 'writeBundle' //防止打包后,tac文件丢失}),],},// outDir: 'dist',// assetsDir: 'assets',},}
})
第五步：
在使用到验证码的 vue 文件中，后端需要给俩个接口：生成验证码接口 和 校验验证码接口
const checkVerificationCode = () => {const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;// config 对象为TAC验证码的一些配置和验证的回调const config = {//生成接口requestCaptchaDataUrl: `${apiBaseUrl}/getReCaptchaImageV2.json`,// 验证接口validCaptchaUrl: `${apiBaseUrl}/getReCaptchaImageV3.json`,bindEl: '#captcha-box',// 验证成功回调函数(必选项,必须配置)validSuccess: (res, c, tac) => {// 销毁验证码服务tac.destroyWindow();// console.log("验证成功，后端返回的数据为", res);},// 验证失败的回调函数(可忽略，如果不自定义 validFail 方法时，会使用默认的)validFail: (res, c, tac) => {console.log('验证码验证失败回调...', res, c, tac);// 验证失败后重新拉取验证码tac.reloadCaptcha();},// 刷新按钮回调事件btnRefreshFun: (el, tac) => {console.log('刷新按钮触发事件...');tac.reloadCaptcha();},// 关闭按钮回调事件btnCloseFun: (el, tac) => {console.log('关闭按钮触发事件...');tac.destroyWindow();}};// 一些样式配置， 可不传const style = {// 按钮样式btnUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3.png",// 背景样式bgUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3-bg.jpg",// logo地址logoUrl: "@/assets/logo.png",// 滑动边框样式moveTrackMaskBgColor: "#f7b645",moveTrackMaskBorderColor: "#ef9c0d"}// 参数1 为 tac文件是目录地址， 目录里包含 tac的js和css等文件// 参数2 为 tac验证码相关配置// 参数3 为 tac窗口一些样式配置window.initTAC('./tac', config, style).then((tac) => {tac.init(); // 调用init则显示验证码}).catch((e) => {console.log('初始化tac失败', e);});
};
注意点：
1、更改图标或者背景地址
图片需要放在 tac/images 文件中，不然生产环境会渲染不出的情况出现。
2、接口是拼接本地配置好的后端地址
到这里基本上就实现了滑块验证功能，然后在各个回调中做处理。
后端生成接口返回的数据及格式
重点：
在 tac.min.js 源码文件 中requestCaptchaData 这个方法是调用后端生成验证码的接口
参数要自己更改下，如下：
额外：
回调参数不需要的也可以自己在源码里面修改
效果如下：
