vue实现滑块验证（使用awsc实现）（方法1）

引入AWSC文件

<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>

html代码：

<div class="verifyCode">                                  
     <div id="nc"></div>
</div>

初始化滑块：

initDrag(){
      var that =this
      // 实例化nc
      AWSC.use("nc", function (state, module) {
          // 初始化
          window.nc = module.init({
              // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
              appkey: "CF_APP_1",
              //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
              scene: "register",
              // 声明滑动验证需要渲染的目标ID。
              renderTo: "nc",
              //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
              success: function (data) {
                  window.console && console.log(data.sessionId)
                  window.console && console.log(data.sig)
                  window.console && console.log(data.token)

                  that.dragStatus =true   //  拖动状态，判断滑块是否拖动完成
              },
              // 滑动验证失败时触发该回调参数。
              fail: function (failCode) {
                  window.console && console.log(failCode)
              },
              // 验证码加载出现异常时触发该回调参数。
              error: function (errorCode) {
                  window.console && console.log(errorCode)
              }
          });
      })
    },

在activated生命周期中执行初始化方法：

activated(){
   this.initDrag();  
}

css样式调节（根据个人需求适当调整）：

.nc{
   428px !important;
  margin: 20px;
}
.nc-container .nc_scale .btn_ok{
  color: #4092FF !important;
}
.nc-container .nc_scale .nc_ok, .nc-container .nc_scale .nc_bg{
  background: #4092FF !important;
}
.nc-container #nc_1_wrapper{
  height: 60px;
  line-height: 60px;
}
.nc_scale{
   428px !important;
  height: 60px !important;
}
.nc-container .nc_scale .btn_slide{
  height: 58px;
  line-height: 58px;
  cursor: pointer;
}
.nc-container .scale_text.scale_text.slidetounlock span[data-nc-lang="SLIDE"]{
  height: 60px;
  line-height: 60px;
}
.nc-container .nc_scale .btn_ok{
  height: 58px !important;
  line-height: 58px !important;
}
.nc-container .nc_scale span.nc-lang-cnt{
  line-height: 58px !important;
  font-size: 19px;
}

显示效果如下：

（未拖动）

（拖动中）

 

 （验证通过）