效果图


工具

  1. vue 2.x
  2. vue-cli 3
  3. 阿里云账号（后盾须要配好：appkey，scene）

index.html

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

vue.config.js

module.exports = {  configureWebpack: {    externals: {      AWSC: 'AWSC',    },  }}

组件 components/NoCaptch.vue

<template>  <div>    <div id="nc"></div>  </div></template><script>import { errorMsg } from '@/utils/message'; // 谬误提醒，代码略export default {  data() {    return {      nc: '', // noCaptcha实例    };  },  created() {    this.init(); // 初始化办法  },  methods: {    init() {      const self = this;      // 实例化nc      AWSC.use('nc', function(state, module) {        // 初始化        self.nc = module.init({          // 您能够在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。          appkey: 'xx',          // 您能够在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。          scene: 'xx',          // 滑块渲染的DOM id。          renderTo: 'nc',          // 您能够在该回调参数中将会话ID（sessionId）、签名串（sig）、申请惟一标识（token）字段记录下来，随业务申请一起发送至您的服务端调用验签。          success: function(data) {            self.$emit('slideCallback', data);          },          // 滑动验证失败时触发该回调参数。          fail: function(failCode) {            errorMsg(`滑动验证失败,失败编号${failCode}`);            console.log(failCode);          },          // 验证码加载出现异常时触发该回调参数。          error: function(errorCode) {            errorMsg(`验证码加载异样,异样编号${errorCode}`);            console.log(errorCode);          },        });      });    },  },};</script><style lang="less" scoped>/deep/.nc-container #nc_1_wrapper {  width: 100%;  height: 36px;  line-height: 36px;  #nc_1_n1t,  #nc_1__bg,  #nc_1_n1z,  #nc_1__scale_text,  .nc-lang-cnt {    height: 36px;    line-height: 36px;  }}</style>

登录页援用组件 login.vue

template:<NoCaptcha @slideCallback="finishSlide" /><script>import NoCaptcha from '@/components/NoCaptch.vue';...构造略method: {  // 实现滑动  finishSlide(data) {    // 按需应用返回值    console.log('会话ID', data.sessionId)    console.log('签名串', data.sig)    console.log('滑块申请的token', data.token)  },}</script>