//index.html 引入 <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
<template>
<div>
<!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->
<div
id="slide"
class="nc-container"
/>
</div>
</template>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
<script>
export default {
data() {
return {
nc:\'\' // noCaptcha实例的值
}
},
mounted() {
// 初始化方法
this.init()
},
methods: {
init() {
const self = this
// 生成的随机token
const nc_token = [
\'FFFF0N00000000009699\', // appkey(自己填写)
new Date().getTime(),
Math.random()
].join(\':\')
// 参数
const NC_Opt = {
// id的值
renderTo: \'#slide\',// 声明滑动验证需要渲染的目标元素ID
appkey: \'FFFF0N00000000009699\', // appkey(自己填写)
scene: \'nc_login\', // 场景值(当前pc登陆) 滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
token: nc_token, // token
customWidth: \'100%\', // 滑动条的宽度
trans: { key1: \'code0\' }, // //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
elementID: [\'usernameID\'],
is_Opt: 0,
language: \'cn\', // 中文
isEnabled: true,// 是否启用。一般情况，保持默认值（true）即可
timeout: 3000,// 内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
times: 5,// 允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
callback: function(data) {
// 前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
// 在这里可以拿到返回的数据
const param = {
token: nc_token,
sessionId: data.csessionid,
sig: data.sig,
scene: \'nc_login\'
}
// 传给父组件 这里我是封装的组件 把值传出去了 然后请求接口
self.$emit(\'handleSlideAly\', param)
}
}
this.nc = new noCaptcha(NC_Opt)
// 用于自定义文案。详细配置方法请参见自定义文案与多语言文档。
this.nc.upLang(\'cn\', {
_startTEXT: \'请按住滑块，拖动到最右边\',
_yesTEXT: \'验证通过\',
_error300:
\'哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次\',
_errorNetwork:
\'网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>\'
})
},
// 重置方法 api
reset(){
this.nc.reset()
}
}
}
</script>
<style lang="less" scoped>
/deep/.nc-container .nc_scale {
height: 42px;
}
/deep/.nc-container .nc_scale span {
line-height: 42px;
height: 42px;
}
</style>
参考链接：
滑动验证-功能概述：https://help.aliyun.com/document_detail/121893.html?spm=5176.2020520162.0.0.4c4c5fb0Yh1s6S