vue应用图形验证码（滑块验证码、文字点选）
先看实现效果
1.下载前端文件到js文件夹
2.下载load.js到js文件夹中
minio.tianai.cloud/public/stat…
3.前端index.html文件引入
<script src='/js/pic-captcha/load.min.js'></script>
4.组件代码
<template>
<teleport to="body" :disabled="!show">
<div v-show="show" style="position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%); z-index: 99999">
<div id="pic-captcha-container"></div>
</div>
</teleport>
</template>
<script>
export default {
name: "PicCaptcha",
props: {
show: {
type: Boolean,
default: false
}
},
data() {
return {}
},
watch: {
show(newVal, oldVal) {
if (newVal) {
this.initCaptcha()
}
}
},
methods: {
initCaptcha() {
const captchaConfig = {
// 请求验证码接口
requestCaptchaDataUrl: "",
// 验证验证码接口
validCaptchaUrl: "",
// 绑定的div
bindEl: "#pic-captcha-container",
// 验证成功回调函数
validSuccess: (res, c, tac) => {
// 销毁验证码
tac.destroyWindow();
this.$emit('update:show', false);
this.$emit('validSuccess', res.data.token);
},
btnCloseFun: (el, tac) => {
console.log("关闭按钮触发事件...");
tac.destroyWindow();
this.$emit('update:show', false);
}
}
const style = {
logoUrl: null
}
// 2.初始化验证码
window.initTAC("/web/js/pic-captcha/tac", captchaConfig, style).then(tac => {
tac.init();
})
}
}
}
</script>
5.登录模块引用
组件引用
<PicCaptcha ref="PicCaptchaRef" v-model:show="showPicCaptcha" @validSuccess="handlePicCaptchaSuccess" />
点击登录按钮
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
if (!this.loginForm.picCaptchaToken) {
this.showPicCaptcha = true
return;
}
const loading = this.$loading({
lock: true,
text: '登录中,请稍后',
background: 'rgba(0, 0, 0, 0.7)',
});
this.$store
.dispatch('LoginByUsername', this.loginForm)
.then(() => {
if (this.website.switchMode) {
const deptId = this.userInfo.dept_id;
const roleId = this.userInfo.role_id;
if (deptId.includes(',') || roleId.includes(',')) {
this.loginForm.deptId = deptId;
this.loginForm.roleId = roleId;
this.userBox = true;
this.$store.dispatch('LogOut').then(() => {
loading.close();
});
return false;
}
}
loading.close();
this.$router.push(this.tagWel);
})
.catch(err => {
this.$emit('errorCatch', err, this.loginForm);
loading.close();
})
.finally(() => {
this.loginForm.picCaptchaToken = ''
});
}
});
},
handlePicCaptchaSuccess(token) {
this.loginForm.picCaptchaToken = token
this.handleLogin()
},
注：此文章借鉴 gitee.com/dromara/tia… 在线文档 doc.captcha.tianai.cloud/#_3-%E5%9C%…
