Vue-cli引用騰訊驗證碼

發現自己寫登陸頁面得驗證碼什麼的總是缺點意思，沒那味道(手機端)。最後選擇了引用騰訊驗證碼，前前後後找了好多天，發現網上的教程都是複製粘貼，根本就沒有講詳細得用法和代碼。真是頭疼，他們寫博客如果只是複製粘貼，還有啥意思，真是服了，這樣複製粘貼以後再看還看得懂嗎？？？？？

引入

Vue-cli在引入TCaptcha.js
我還在裏面下了依賴，不過沒啥用，發現還是直接引用最實在。

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

然後把代碼添加到methods`裏（我這裏是放到按鈕方法裏了，當按登陸按鈕後，出現填寫驗證碼界面，只有正確填寫驗證碼後纔會進行axios操作）

騰訊驗證碼註冊具體註冊方法網上還是很詳細得，就是用法沒有，最重要得是免費還好看！！

//appid  爲騰訊驗證碼的參數
let captcha = new TencentCaptcha('appid', (rsp) => {
    console.log(rsp)
    if (rsp.ret === 0) {
      //當ret是0得時候代表成功填寫了驗證碼，我在裏面進行了axios操作。
    } else {
        this.$message({
        message: '驗證不通過',
        type: 'warning'
        })
    }
}, {})
captcha.show()
          //  ---------------

返回的數據格式：

appid: "appid"
bizState: undefined
randstr: "@QQQ"
ret: 0
ticket: "t02a_Q1GYf0ysN49Du__adCw8r4yFoRskWUT0o_HcnQwnVm5jYJPy68m9vDQahsMbVC58rImgM_ReiCJSy1h48yTnxXHL_zE0eiTL5KoW6vpWACviGBw-sW8w**"

參考

騰訊驗證碼配置文檔