CodeBox 验证码输入框

Scan me!

验证码输入框

引入

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

代码演示

基本

  1. <template>
  2.   <div class="md-example-child md-example-child-codebox md-example-child-codebox-0">
  3.     <md-codebox
  4.       v-model="code"
  5.       :maxlength="4"
  6.       autofocus
  7.     />
  8.   </div>
  9. </template>
  11. <script>
  12. import {Codebox} from 'mand-mobile'
  14. export default {
  15.   name: 'codebox-demo',
  16.   components: {
  17.     [Codebox.name]: Codebox,
  18.   },
  19.   data() {
  20.     return {
  21.       code: '',
  22.     }
  23.   },
  24. }
  26. </script>
  27.  
  28.

不限长度

  1. <template>
  2.   <div class="md-example-child md-example-child-codebox md-example-child-codebox-2">
  3.     <md-codebox
  4.       :maxlength="-1"
  5.       v-model="code"
  6.     />
  7.   </div>
  8. </template>
  10. <script>
  11. import {Codebox} from 'mand-mobile'
  13. export default {
  14.   name: 'codebox-demo',
  15.   components: {
  16.     [Codebox.name]: Codebox,
  17.   },
  18.   data() {
  19.     return {
  20.       code: '',
  21.     }
  22.   },
  23. }
  25. </script>
  26.  
  27.

掩码遮蔽

  1. <template>
  2.   <div class="md-example-child md-example-child-codebox md-example-child-codebox-1">
  3.     <md-codebox
  4.       :mask="true"
  5.       :maxlength="6"
  6.       v-model="code"
  7.     />
  8.   </div>
  9. </template>
  11. <script>
  12. import {Codebox} from 'mand-mobile'
  14. export default {
  15.   name: 'codebox-demo',
  16.   components: {
  17.     [Codebox.name]: Codebox,
  18.   },
  19.   data() {
  20.     return {
  21.       code: '',
  22.     }
  23.   },
  24. }
  26. </script>
  27.  
  28.

系统键盘

  1. <template>
  2.   <div class="md-example-child md-example-child-codebox md-example-child-codebox-3">
  3.     <md-codebox
  4.       :maxlength="-1"
  5.       v-model="code"
  6.       system
  7.     />
  8.   </div>
  9. </template>
  11. <script>
  12. import {Codebox} from 'mand-mobile'
  14. export default {
  15.   name: 'codebox-demo',
  16.   components: {
  17.     [Codebox.name]: Codebox,
  18.   },
  19.   data() {
  20.     return {
  21.       code: '',
  22.     }
  23.   },
  24. }
  26. </script>
  27.  
  28.

API

Codebox Props

属性说明类型默认值
v-model验证码字符串String-
maxlength字符最大输入长度, 若为-1则不限制输入长度Number4
autofocus是否直通聚焦拉起键盘, 对系统键盘不生效Booleanfalse
mask是否掩码Booleanfalse
closable点击输入框及键盘其他区域是否收起键盘Booleantrue
ok-text键盘确认键文案String确认
disorder数字键盘是否乱序Booleanfalse
system是否使用系统默认键盘Booleanfalse

Codebox Methods

focus()

聚焦输入

blur()

失焦隐藏键盘

Codebox Events

@submit(code)

用户提交输入内容事件