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{
  width: 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{
  width: 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;
}

 

顯示效果如下：

（未拖動）

 

（拖動中）

 

 

 （驗證通過）