项目中需要用到滑块验证，比如说本博客中的留言评论功能，可以使用腾讯的滑块验证，接下来看操作！

首先需要获取腾讯云的CaptchaAppId

可以参考腾讯云图形验证的使用文档。 第一步：登录腾讯云，打开控制台，打开验证码功能。

第二步：在腾讯云里新增图形验证，记录好==CaptchaAppId==

然后开始集成

1、在index.html中引入js依赖

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

2、新建TencentCaptcha.js

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

3、main.js中全局引入

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

4、组件中使用

复制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')
})
js

大功告成，是不是很简单~

博客的留言功能已经加上了，可以体验一下，效果图如下：