NumberKeyboard 数字键盘

Scan me!

一般用于密码，验证码或支付金额输入等金融场景

引入

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

代码演示

基本

有确认键和小数点，一般用于价格或金额输入
  1. <template>
  2.   <div class="md-example-child md-example-child-number-keyboard md-example-child-number-keyboard-0">
  3.     <md-button @click="isKeyBoardShow = !isKeyBoardShow">{{ isKeyBoardShow ? '收起键盘' : '唤起键盘' }}</md-button>
  4.     <md-number-keyboard
  5.       v-model="isKeyBoardShow"
  6.       @enter="onNumberEnter"
  7.       @delete="onNumberDelete"
  8.     ></md-number-keyboard>
  9.     <div class="md-example-display" v-show="isKeyBoardShow" v-text="number"></div>
  10.   </div>
  11. </template>
  13. <script>
  14. import {NumberKeyboard, Button} from 'mand-mobile'
  16. export default {
  17.   name: 'number-keyboard-demo',
  18.   components: {
  19.     [Button.name]: Button,
  20.     [NumberKeyboard.name]: NumberKeyboard,
  21.   },
  22.   data() {
  23.     return {
  24.       isKeyBoardShow: false,
  25.       number: '',
  26.     }
  27.   },
  28.   methods: {
  29.     onNumberEnter(val) {
  30.       this.number += val
  31.     },
  32.     onNumberDelete() {
  33.       if (this.number === '') {
  34.         return
  35.       }
  36.       this.number = this.number.substr(0, this.number.length - 1)
  37.     },
  38.   },
  39. }
  41. </script>
  43. <style lang="stylus" scoped>
  44. .md-example-display
  45.   position fixed
  46.   top 30%
  47.   left 50%
  48.   z-index 9999
  49.   transform translate(-50%, -50%)
  50.   font-size font-heading-large * 2
  51.   text-shadow 0 4px 20px color-text-minor
  52. </style>
  53.  
  54.

数字键乱序

  1. <template>
  2.   <div class="md-example-child md-example-child-number-keyboard md-example-child-number-keyboard-1">
  3.     <md-button @click="isKeyBoardShow = !isKeyBoardShow">{{ isKeyBoardShow ? '收起键盘' : '唤起键盘' }}</md-button>
  4.     <md-number-keyboard
  5.       v-model="isKeyBoardShow"
  6.       ok-text="支付"
  7.       disorder
  8.       @enter="onNumberEnter"
  9.       @delete="onNumberDelete"
  10.     ></md-number-keyboard>
  11.     <div class="md-example-display" v-show="isKeyBoardShow" v-text="number"></div>
  12.   </div>
  13. </template>
  15. <script>
  16. import {NumberKeyboard, Button} from 'mand-mobile'
  18. export default {
  19.   name: 'number-keyboard-demo',
  20.   components: {
  21.     [Button.name]: Button,
  22.     [NumberKeyboard.name]: NumberKeyboard,
  23.   },
  24.   data() {
  25.     return {
  26.       isKeyBoardShow: false,
  27.       number: '',
  28.     }
  29.   },
  30.   methods: {
  31.     onNumberEnter(val) {
  32.       this.number += val
  33.     },
  34.     onNumberDelete() {
  35.       if (this.number === '') {
  36.         return
  37.       }
  38.       this.number = this.number.substr(0, this.number.length - 1)
  39.     },
  40.   },
  41. }
  43. </script>
  45. <style lang="stylus" scoped>
  46. .md-example-display
  47.   position fixed
  48.   top 30%
  49.   left 50%
  50.   z-index 9999
  51.   transform translate(-50%, -50%)
  52.   font-size font-heading-large * 2
  53.   text-shadow 0 4px 20px color-text-minor
  54. </style>
  55.  
  56.

简单类型

无确认键和小数点，一般用于密码或验证码输入
  1. <template>
  2.   <div class="md-example-child md-example-child-number-keyboard md-example-child-number-keyboard-1">
  3.     <md-button @click="isKeyBoardShow = !isKeyBoardShow">{{ isKeyBoardShow ? '收起键盘' : '唤起键盘' }}</md-button>
  4.     <md-number-keyboard
  5.       v-model="isKeyBoardShow"
  6.       ok-text="支付"
  7.       type="simple"
  8.       @enter="onNumberEnter"
  9.       @delete="onNumberDelete"
  10.     ></md-number-keyboard>
  11.     <div class="md-example-display" v-show="isKeyBoardShow" v-text="number"></div>
  12.   </div>
  13. </template>
  15. <script>
  16. import {NumberKeyboard, Button} from 'mand-mobile'
  18. export default {
  19.   name: 'number-keyboard-demo',
  20.   components: {
  21.     [Button.name]: Button,
  22.     [NumberKeyboard.name]: NumberKeyboard,
  23.   },
  24.   data() {
  25.     return {
  26.       isKeyBoardShow: false,
  27.       number: '',
  28.     }
  29.   },
  30.   methods: {
  31.     onNumberEnter(val) {
  32.       this.number += val
  33.     },
  34.     onNumberDelete() {
  35.       if (this.number === '') {
  36.         return
  37.       }
  38.       this.number = this.number.substr(0, this.number.length - 1)
  39.     },
  40.   },
  41. }
  43. </script>
  45. <style lang="stylus" scoped>
  46. .md-example-display
  47.   position fixed
  48.   top 30%
  49.   left 50%
  50.   z-index 9999
  51.   transform translate(-50%, -50%)
  52.   font-size font-heading-large * 2
  53.   text-shadow 0 4px 20px color-text-minor
  54. </style>
  55.  
  56.

API

NumberKeyboard Props

属性说明类型默认值备注
v-model键盘是否展示Booleanfalse-
is-view是否内嵌在页面内展示，否则以弹层形式Booleanfalse-
type键盘类型Stringprofessionalprofessional有确认键和小数点常用于价格或金额输入，simple一般用于密码或验证码输入
disorder键盘数字键是否乱序Booleanfalse-
ok-text键盘确认键文案String确认-

NumberKeyboard Methods

show()

展示键盘

hide()

隐藏键盘

NumberKeyboard Events

@enter(val)

数字键点击事件

属性说明类型
val数字Number
@delete()

回退键点击事件

@confirm()

确认键点击事件