乐趣区

关于javascript:vue阿里云滑块

jiezi

效果图


工具

  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>

退出移动版