vue3 使用腾讯云验证码

在index引入js

  <script type='text/javascript' src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

使用

 <el-button class="button" type="primary" size="medium" @click="verificationCode">查询</el-button>

方法

function  verificationCode() {
    let captchaId = 'xxxxxxxx'
    // 腾讯滑块验证码appid生成一个滑块验证码对象
    var captcha = new TencentCaptcha(captchaId, function(res) {
        if (res.ret === 0) {
            // 页面上滑动正确，请求自己的业务接口
            // 记得把验证成功的票据和随机字符带到自己接口中去腾讯验证票据的真实性
            // _this.searchData.ticket = res.ticket
            // _this.searchData.randStr = res.randstr
            // _this.getSearchResult()
            console.log(res, '腾讯云验证码')
        }
    })
    captcha.langFun()
    // 滑块显示
    captcha.show()
}

后端集成地址

https://console.cloud.tencent.com/api/explorer?Product=captcha&Version=2019-07-22&Action=DescribeCaptchaResult&SignVersion=