Package Exports

vue-captcha

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-captcha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-captcha

Component (es6) Captcha for Vue.js

Version

npm v1.0.2 (latest) HERE

Demo

The demo page is HERE.

Requirements

Vue.js ^2.0.0
uuid ^4.7.0
font-awesome ^3.1.0

Instllation

npm

$ npm install --save vue-captcha

Usage

<template>
  <div class="form">
    <div class="row">
      <div><strong>Default</strong></div>
      <my-captcha :callSuccess="captchaBtn"></my-captcha>
      <button class="button" v-bind:disabled="btndis" v-on:click="clicked">Submit</button>
    </div>
    <div class="row">
      <div><strong>Change: color </strong></div>
      <my-captcha :callSuccess="captchaOk" color="green"></my-captcha>
    </div>
    <div class="row">
      <div><strong>Change: color / resolve (only text) </strong></div>
      <my-captcha :callSuccess="captchaOk" color="orange" resolve="text"></my-captcha>
    </div>
    <div class="row">
      <div><strong>Change: color / resolve (only digit) </strong></div>
      <my-captcha :callSuccess="captchaOk" color="purple" resolve="digit"></my-captcha>
    </div>
    <div class="row">
      <div><strong>Change: color / mode (math) </strong></div>
      <my-captcha :callSuccess="captchaOk" color="blue" mode="math"></my-captcha>
    </div>
    <div class="row">
      <div><strong>Change: color / mode (math) / resolve (only text) </strong></div>
      <my-captcha :callSuccess="captchaOk" color="black" mode="math" resolve="text"></my-captcha>
    </div>
    <div class="row">
      <div><strong>Change: color / mode (math) / resolve (only digit) </strong></div>
      <my-captcha :callSuccess="captchaOk" color="red" mode="math" resolve="digit"></my-captcha>
    </div>
  </div>
</template>

<script>

import myCaptcha from 'vue-captcha'

export default {
  name: 'form',
  data () {
    return {
      btndis: true
    }
  },
  methods: {
    captchaOk () {
      console.log('captcha ok.!')
    },
    captchaBtn () {
     this.btndis = false
    },
    clicked () {
      alert('button active.!')
    }
  },
  components: {
    'my-captcha': myCaptcha
  }
}
</script>

<style scope>
  .form {
    margin: 10px;
  }
  .row {
    margin: 10px;
  }
  .button {
    margin-top: 5px;
    background-color: #1D9D74;
    border: 1px solid transparent;
    border-radius: 3px;
    border-color: #dbdbdb;
    text-align: center;
    font-size: 1em;
    height: 2.25em;
    line-height: 1.5;
    color: white;
    cursor: pointer;
    padding-bottom: calc(0.375em - 1px);
    padding-left: calc(0.625em - 1px);
    padding-right: calc(0.625em - 1px);
    padding-top: calc(0.375em - 1px);
  }
  .button[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
  }  
</style>

API

callSuccess
- call Function when Captcha is successful

type: Function,
required: true

color
- apply color to different components in the Captcha

type: String
reuired: false
default: '#1D9D74'

mode
- change the way in the option to question

type: String
required: false
default: 'text' // 'text' -> alphanumeric | 'math' -> operations math

resolve
- change the way the solve

type: String
required: false
default: 'all' // 'all' -> written and digit | 'text' -> only written | 'digit' -> only digit

prop (Function CallBack -success- )

captchaOk = () => {
  console.log('captcha ok.!')
}

<my-captcha :callSuccess="captchaOk"></my-captcha>

License

The MIT License