• 引入
  • 代码演示
    • 基本
    • 不限长度
    • 掩码遮蔽
    • 系统键盘
  • API
    • Codebox Props
    • Codebox Methods
      • focus()
      • blur()
    • Codebox Events
      • @submit(code)

    CodeBox 验证码输入框

    Scan me!

    验证码输入框

    引入

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

    代码演示

    基本

    Codebox 字符码输入框 - 图2

    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.

    不限长度

    Codebox 字符码输入框 - 图3

    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.

    掩码遮蔽

    Codebox 字符码输入框 - 图4

    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.

    系统键盘

    Codebox 字符码输入框 - 图5

    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
    disabled禁用输入Booleanfalse
    justify自动拉伸布局Booleanfalse
    closable点击输入框及键盘其他区域是否收起键盘Booleantrue
    ok-text键盘确认键文案String确认
    disorder数字键盘是否乱序Booleanfalse
    system是否使用系统默认键盘Booleanfalse

    Codebox Methods

    focus()

    聚焦输入

    blur()

    失焦隐藏键盘

    Codebox Events

    @submit(code)

    用户提交输入内容事件