Captcha 验证码

Scan me!

验证码校验窗口

引入

  1. import { Captcha } from 'mand-mobile'
  3. Vue.component(Captcha.name, Captcha)

代码演示

自定义

  1. <template>
  2.   <div class="md-example-child md-example-child-captcha">
  3.     <md-field title="文案">
  4.       <md-input-item
  5.         title="标题"
  6.         v-model="title"
  7.       ></md-input-item>
  8.       <md-input-item
  9.         title="插槽内容"
  10.         v-model="content"
  11.       ></md-input-item>
  12.       <md-input-item
  13.         title="短信验证码"
  14.         value="1234"
  15.         readonly
  16.       ></md-input-item>
  17.     </md-field>
  19.     <md-field title="配置">
  21.       <md-field-item
  22.         title="限制验证码长度"
  23.         customized
  24.         align="right">
  25.         <md-switch v-model="limit"></md-switch>
  26.       </md-field-item>
  28.       <md-input-item
  29.         title="验证码长度"
  30.         type="tel"
  31.         v-model="maxlength"
  32.       ></md-input-item>
  34.       <md-field-item
  35.         title="采用掩码"
  36.         customized
  37.         align="right">
  38.         <md-switch v-model="mask"></md-switch>
  39.       </md-field-item>
  41.       <md-field-item
  42.         title="使用系统键盘"
  43.         customized
  44.         align="right">
  45.         <md-switch v-model="system"></md-switch>
  46.       </md-field-item>
  48.     </md-field>
  49.     <md-button @click="next">确定</md-button>
  51.     <md-captcha
  52.       ref="captcha"
  53.       v-model="show"
  54.       :title="title"
  55.       :maxlength="limit ? parseFloat(maxlength) : -1"
  56.       :system="system"
  57.       :mask="mask"
  58.       :appendTo="appendTo"
  59.       @submit="submit"
  60.       @show="onShow"
  61.       @hide="onHide"
  62.       @send="onSend"
  63.     >
  64.       {{content}}
  65.     </md-captcha>
  66.     </div>
  67. </template>
  69. <script>
  70. import {Button, Toast, Captcha, InputItem, Field, FieldItem, Switch} from 'mand-mobile'
  72. export default {
  73.   name: 'captcha-demo',
  74.   components: {
  75.     [Button.name]: Button,
  76.     [Captcha.name]: Captcha,
  77.     [InputItem.name]: InputItem,
  78.     [Field.name]: Field,
  79.     [FieldItem.name]: FieldItem,
  80.     [Switch.name]: Switch,
  81.   },
  82.   data() {
  83.     return {
  84.       show: false,
  85.       appendTo: document.querySelector('.doc-demo-box-priview') || document.body,
  86.       title: '输入验证码',
  87.       content: '验证码已发送至 186****5407',
  88.       limit: true,
  89.       maxlength: '4',
  90.       mask: false,
  91.       system: false,
  92.     }
  93.   },
  94.   methods: {
  95.     next() {
  96.       this.show = true
  97.     },
  98.     submit(val) {
  99.       const max = parseFloat(this.maxlength)
  100.       if (!this.limit || max < 0 || val.length === max) {
  101.         if (val !== '1234') {
  102.           this.$refs.captcha.setError('验证码错误，请重新输入')
  103.         } else {
  104.           this.show = false
  105.           Toast({
  106.             content: `你输入了${val}`,
  107.           })
  108.         }
  109.       }
  110.     },
  111.     onSend() {
  112.       console.log('click resend button.')
  113.     },
  114.     onShow() {},
  115.     onHide() {},
  116.   },
  117. }
  119. </script>
  121. <style lang="stylus">
  122. .md-example-child-captcha
  123.   padding 20px
  124.   .md-field
  125.     margin-bottom 40px
  126. </style>
  127.  
  128.

内联

  1. <template>
  2.   <div class="md-example-child md-example-child-captcha-1">
  3.     <md-captcha
  4.       :maxlength="4"
  5.       :isView="true"
  6.     >
  7.       验证码已发送至186****5407
  8.     </md-captcha>
  9.   </div>
  10. </template>
  12. <script>
  13. import {Captcha} from 'mand-mobile'
  15. export default {
  16.   name: 'captcha-demo',
  17.   components: {
  18.     [Captcha.name]: Captcha,
  19.   },
  20. }
  22. </script>
  24. <style lang="stylus">
  25. .md-example-child-captcha-1
  26.   height 650px
  27.   padding 30px 0
  28.   .md-number-keyboard
  29.     margin-top 30px
  30. </style>
  31.  
  32.

API

Captcha Props

属性说明类型默认值
v-model验证码窗口是否显示Booleanfalse
is-view是否内嵌在页面内展示，否则以弹层形式Booleanfalse
maxlength字符最大输入长度, 若为-1则不限制输入长度Number4
mask是否掩码Booleanfalse
system是否使用系统默认键盘Booleanfalse
auto-countdown1.3.0+是否自动开始倒计时，否则需手动调用countdownBooleantrue
title窗口标题String-
appendTo挂载节点HTMLElementdocument.body
count倒计时时长, 设置为0的时候不显示倒计时按钮Number60
countNormalText1.3.0+发送验证码正常状态文字String发送验证码
countActiveText1.3.0+发送验证码及倒计时按钮文案配置项String{$1}秒后重发

Captcha Methods

countdown()

手动重置倒计时

setError(message)

设置报错信息并显示

Captcha Events

@show()

验证码组件显示事件

@hide()

验证码组件隐藏事件

@send(countdown)

发送验证码事件, 第一次打开时或点击重发按钮后触发并开始倒计时，如果auto-countdown为false需手动调用countdown开始倒计时

@submit(code)

用户提交输入内容事件