Captcha-slide NPM

滑块验证插件

使用方法

组件内部使用:

    html:
　      <captcha-slide/>
    js：
    import CaptchaSlide from 'captcha-slide'
    components: {
      CaptchaSlide
    }

main.js 全局安装:

    import CaptchaSlide from 'captcha-slide'
    Vue.use(CaptchaSlide)

直接引用打包后的 captcha-slide.js 并html全局使用 (包括cdn引用):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
<div id="app">
  <captcha-slide @success="onSuccess"></captcha-slide>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./dist/captcha-slide.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
      }
    },
    methods: {
        onSuccess() {  
          // 成功回调
        }
    }
  })
</script>
</body>
</html>

CDN引用,vue局部使用 (开发环境需要代理) --推荐:
全局注册(无法异步加载):

index.html 引用:
<script src="./dist/captcha-slide.js"></script>
注册:
<script>
  if (window['captcha-slide']) {
    Vue.use(window['captcha-slide'].default)
  }
</script>

局部注册(推荐):

index.html 引用(异步):
<script src="./dist/captcha-slide.js" defer></script>
注册:
<template>
  <captcha-slide moduleId="testModule" @success="onSuccess"></captcha-slide>
</template>
<script>
  export default {
    components: {
    // 即使滑块插件下载失败也不会影响其它模块
    captchaSlide: window['captcha-slide'] ? window['captcha-slide'].default : null
  },
  }
</script>

组件属性

props:

moduleId {type: String, default: 'default'}: 调用滑块的模块id
sliderText {type: String, default: '向右滑动'}: 滑动提示文字
show {type: Boolean, default: true}: 右上角是否显示刷新按钮
refreshIfFail {type: Boolean, default: true}: 验证失败后是否刷新图片

event:

@success() : 验证成功回调函数

接口代理

/ecp-tools-backend/slider 代理到 http://dev.web.ckmooc.com

axios vue

@infinitebrahmanuniverse/nolb-capt @everything-registry/sub-chunk-1294 @zalastax/nolb-capt

0.0.1

4 years ago