CodeBox 验证码输入框

Scan me!

验证码输入框

引入

  1. import { Codebox } from 'mand-mobile'
  2. 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>
  10. <script>
  11. import {Codebox} from 'mand-mobile'
  12. export default {
  13. name: 'codebox-demo',
  14. components: {
  15. [Codebox.name]: Codebox,
  16. },
  17. data() {
  18. return {
  19. code: '',
  20. }
  21. },
  22. }
  23. </script>
  24.  

不限长度

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>
  9. <script>
  10. import {Codebox} from 'mand-mobile'
  11. export default {
  12. name: 'codebox-demo',
  13. components: {
  14. [Codebox.name]: Codebox,
  15. },
  16. data() {
  17. return {
  18. code: '',
  19. }
  20. },
  21. }
  22. </script>
  23.  

掩码遮蔽

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>
  10. <script>
  11. import {Codebox} from 'mand-mobile'
  12. export default {
  13. name: 'codebox-demo',
  14. components: {
  15. [Codebox.name]: Codebox,
  16. },
  17. data() {
  18. return {
  19. code: '',
  20. }
  21. },
  22. }
  23. </script>
  24.  

系统键盘

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>
  10. <script>
  11. import {Codebox} from 'mand-mobile'
  12. export default {
  13. name: 'codebox-demo',
  14. components: {
  15. [Codebox.name]: Codebox,
  16. },
  17. data() {
  18. return {
  19. code: '',
  20. }
  21. },
  22. }
  23. </script>
  24.  

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)

用户提交输入内容事件