Captcha 验证码

验证码校验窗口

引入

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

代码演示

自定义

        <template>
  <div class="md-example-child md-example-child-captcha">
    <md-field title="文案">
      <md-input-item
        title="标题"
        v-model="title"
      ></md-input-item>
      <md-input-item
        title="插槽内容"
        v-model="content"
      ></md-input-item>
      <md-input-item
        title="短信验证码"
        value="1234"
        readonly
      ></md-input-item>
    </md-field>
    <md-field title="配置">
      <md-field-item
        title="限制验证码长度"
        customized
        align="right">
        <md-switch v-model="limit"></md-switch>
      </md-field-item>
      <md-input-item
        title="验证码长度"
        type="tel"
        v-model="maxlength"
      ></md-input-item>
      <md-field-item
        title="采用掩码"
        customized
        align="right">
        <md-switch v-model="mask"></md-switch>
      </md-field-item>
      <md-field-item
        title="使用系统键盘"
        customized
        align="right">
        <md-switch v-model="system"></md-switch>
      </md-field-item>
    </md-field>
    <md-button @click="next">确定</md-button>
    <md-captcha
      ref="captcha"
      v-model="show"
      :title="title"
      :maxlength="limit ? parseFloat(maxlength) : -1"
      :system="system"
      :mask="mask"
      :appendTo="appendTo"
      @submit="submit"
      @show="onShow"
      @hide="onHide"
      @send="onSend"
    >
      {{content}}
    </md-captcha>
    </div>
</template>
<script>
import {Button, Toast, Captcha, InputItem, Field, FieldItem, Switch} from 'mand-mobile'
export default {
  name: 'captcha-demo',
  components: {
    [Button.name]: Button,
    [Captcha.name]: Captcha,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Switch.name]: Switch,
  },
  data() {
    return {
      show: false,
      appendTo: document.querySelector('.doc-demo-box-priview') || document.body,
      title: '输入验证码',
      content: '验证码已发送至 186****5407',
      limit: true,
      maxlength: '4',
      mask: false,
      system: false,
    }
  },
  methods: {
    next() {
      this.show = true
    },
    submit(val) {
      const max = parseFloat(this.maxlength)
      setTimeout(() => {
        if (!this.limit || max < 0 || val.length === max) {
          if (val !== '1234') {
            this.$refs.captcha.setError('验证码错误，请重新输入')
          } else {
            this.show = false
            Toast({
              content: `你输入了${val}`,
            })
          }
        }
      }, 300)
    },
    onSend() {
      console.log('click resend button.')
    },
    onShow() {},
    onHide() {},
  },
}
</script>
<style lang="stylus">
.md-example-child-captcha
  padding 20px
  .md-field
    margin-bottom 40px
</style>
 
      

内联

        <template>
  <div class="md-example-child md-example-child-captcha-1">
    <md-captcha
      :maxlength="4"
      :isView="true"
      brief="最新验证码依然有效，请勿重发"
    >
      验证码已发送至186****5407
    </md-captcha>
  </div>
</template>

<script>
import {Captcha} from 'mand-mobile'

export default {
  name: 'captcha-demo',
  components: {
    [Captcha.name]: Captcha,
  },
}

</script>

<style lang="stylus">
.md-example-child-captcha-1
  height 650px
  padding 30px 0
  .md-number-keyboard
    margin-top 30px
</style>

      

API

Captcha Props

Captcha Methods

countdown()

开始倒计时

resetcount()

重置倒计时

setError(message)

设置报错信息并显示

Captcha Events

@show()

验证码组件显示事件

@hide()

验证码组件隐藏事件

@send(countdown)

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

@submit(code)

用户提交输入内容事件