vue项目集成腾讯滑块验证

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
复制

export default {
    install(Vue) {
        // 这里的Appid是腾讯工作台配置
        let Captcha = new TencentCaptcha('2053242547', res => {
            new Vue().$bus.$emit('getTicket', res)
        });
        Vue.prototype.$Captcha = Captcha
    }
}
复制

// 腾讯滑块验证(新建一个js文件)
import TencentCaptcha from '@/assets/js/TencentCaptcha'
Vue.use(TencentCaptcha);
// 使用
Vue.prototype.$bus = new Vue();
复制

this.$Captcha.show();
this.$bus.$on('getTicket', res => {
      	// 返回结果
     	// ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
      	// ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
      	// CaptchaAppId       String    验证码应用ID。
      	// bizState    Any       自定义透传参数。
      	// randstr     String    本次验证的随机串，请求后台接口时需带上。
	if (res.ret === 0) {
	   //验证成功的操作
	} else {
           this.$notify.warning('请通过验证')
        }
	this.$bus.$off('getTicket')
})
复制