表单组件 Form - NumberKeyboard 数字键盘 - 《Mand Mobile v2.x 组件文档》

引入
代码演示
API

NumberKeyboard 数字键盘

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

引入

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

代码演示

基本

有确认键和小数点，一般用于价格或金额输入

        <template>
  <div class="md-example-child md-example-child-number-keyboard md-example-child-number-keyboard-0">
    <md-button @click="toggleKeyboard(0)">{{ isKeyBoardShow[0] ? '收起键盘' : '唤起键盘，有小数点' }}</md-button>
    <md-number-keyboard
      v-model="isKeyBoardShow[0]"
      @enter="onNumberEnter"
      @delete="onNumberDelete"
    ></md-number-keyboard>
    <md-button @click="toggleKeyboard(1)">{{ isKeyBoardShow[1] ? '收起键盘' : '唤起键盘，无小数点' }}</md-button>
    <md-number-keyboard
      v-model="isKeyBoardShow[1]"
      hide-dot
      @enter="onNumberEnter"
      @delete="onNumberDelete"
    ></md-number-keyboard>
    <md-button @click="toggleKeyboard(2)">{{ isKeyBoardShow[2] ? '收起键盘' : '唤起键盘，替换键值' }}</md-button>
    <md-number-keyboard
      v-model="isKeyBoardShow[2]"
      :text-render="keyFormatter"
      @enter="onNumberEnter"
      @delete="onNumberDelete"
    ></md-number-keyboard>
    <div class="md-example-display" v-show="isKeyBoardShow" v-text="number"></div>
  </div>
</template>
<script>
import {NumberKeyboard, Button} from 'mand-mobile'
export default {
  name: 'number-keyboard-demo',
  components: {
    [Button.name]: Button,
    [NumberKeyboard.name]: NumberKeyboard,
  },
  data() {
    return {
      isKeyBoardShow: [],
      number: '',
    }
  },
  methods: {
    toggleKeyboard(index) {
      this.$set(this.isKeyBoardShow, index, !this.isKeyBoardShow[index])
    },
    keyFormatter(val) {
      if (val === '.') {
        return 'x'
      }
    },
    onNumberEnter(val) {
      this.number += val
    },
    onNumberDelete() {
      if (this.number === '') {
        return
      }
      this.number = this.number.substr(0, this.number.length - 1)
    },
  },
}
</script>
<style lang="stylus">
.md-example-child-number-keyboard-0
  .md-button
    margin-bottom 10px
  .md-example-display
    position fixed
    top 30%
    left 50%
    z-index 9999
    transform translate(-50%, -50%)
    font-size 120px
    text-shadow 0 4px 20px #666
</style>

数字键乱序

        <template>
  <div class="md-example-child md-example-child-number-keyboard md-example-child-number-keyboard-2">
    <md-button @click="isKeyBoardShow = !isKeyBoardShow">{{ isKeyBoardShow ? '收起键盘' : '唤起键盘' }}</md-button>
    <md-number-keyboard
      v-model="isKeyBoardShow"
      ok-text="支付"
      disorder
      @enter="onNumberEnter"
      @delete="onNumberDelete"
    ></md-number-keyboard>
    <div class="md-example-display" v-show="isKeyBoardShow" v-text="number"></div>
  </div>
</template>

<script>
import {NumberKeyboard, Button} from 'mand-mobile'

export default {
  name: 'number-keyboard-demo',
  components: {
    [Button.name]: Button,
    [NumberKeyboard.name]: NumberKeyboard,
  },
  data() {
    return {
      isKeyBoardShow: false,
      number: '',
    }
  },
  methods: {
    onNumberEnter(val) {
      this.number += val
    },
    onNumberDelete() {
      if (this.number === '') {
        return
      }
      this.number = this.number.substr(0, this.number.length - 1)
    },
  },
}

</script>

<style lang="stylus" scoped>
.md-example-display
  position fixed
  top 30%
  left 50%
  z-index 9999
  transform translate(-50%, -50%)
  font-size 120px
  text-shadow 0 4px 20px #666
</style>

简单类型

无确认键和小数点，一般用于密码或验证码输入

        <template>
  <div class="md-example-child md-example-child-number-keyboard md-example-child-number-keyboard-1">
    <md-button @click="isKeyBoardShow = !isKeyBoardShow">{{ isKeyBoardShow ? '收起键盘' : '唤起键盘' }}</md-button>
    <md-number-keyboard
      v-model="isKeyBoardShow"
      type="simple"
      @enter="onNumberEnter"
      @delete="onNumberDelete"
    ></md-number-keyboard>
    <div class="md-example-display" v-show="isKeyBoardShow" v-text="number"></div>
  </div>
</template>

<script>
import {NumberKeyboard, Button} from 'mand-mobile'

export default {
  name: 'number-keyboard-demo',
  components: {
    [Button.name]: Button,
    [NumberKeyboard.name]: NumberKeyboard,
  },
  data() {
    return {
      isKeyBoardShow: false,
      number: '',
    }
  },
  methods: {
    onNumberEnter(val) {
      this.number += val
    },
    onNumberDelete() {
      if (this.number === '') {
        return
      }
      this.number = this.number.substr(0, this.number.length - 1)
    },
  },
}

</script>

<style lang="stylus" scoped>
.md-example-display
  position fixed
  top 30%
  left 50%
  z-index 9999
  transform translate(-50%, -50%)
  font-size 120px
  text-shadow 0 4px 20px #666
</style>

插槽

        <template>
  <div class="md-example-child md-example-child-number-keyboard md-example-child-number-keyboard-3">
    <md-button @click="isKeyBoardShow = !isKeyBoardShow">{{ isKeyBoardShow ? '收起键盘' : '唤起键盘' }}</md-button>
    <md-number-keyboard
      v-model="isKeyBoardShow"
      ok-text="支付"
      disorder
    >
      <p class="number-keyboard-header">
        <md-icon name="security"></md-icon>&nbsp;安全支付
      </p>
    </md-number-keyboard>
  </div>
</template>

<script>
import {NumberKeyboard, Button, Icon} from 'mand-mobile'

export default {
  name: 'number-keyboard-demo',
  components: {
    [Button.name]: Button,
    [Icon.name]: Icon,
    [NumberKeyboard.name]: NumberKeyboard,
  },
  data() {
    return {
      isKeyBoardShow: false,
    }
  },
}

</script>

<style lang="stylus" scoped>
.number-keyboard-header
  display flex
  align-items center
  justify-content center
  padding 10px 0
  font-size 14px
  color #999
</style>

API

NumberKeyboard Props

属性	说明	类型	默认值	备注
v-model	键盘是否展示	Boolean	`false`	-
is-view	是否内嵌在页面内展示，否则以弹层形式	Boolean	`false`	-
type	键盘类型	String	`professional`	`professional`有确认键和小数点常用于价格或金额输入，`simple`一般用于密码或验证码输入
disorder	键盘数字键是否乱序	Boolean	`false`	-
is-hide-confirm	确认时自动隐藏键盘	Boolean	`true`	-
text-render	自定义指定按键的值	Function(value: string): string	-	可替换键`0,1,…9,.`
ok-text	键盘确认键文案	String	`确认`	-

NumberKeyboard Slots

default

<md-number-keyboard>
  <md-icon name="security"></md-icon>&nbsp;安全支付
</md-number-keyboard>

NumberKeyboard Methods

show()

展示键盘

hide()

隐藏键盘

NumberKeyboard Events

@enter(val)

数字键点击事件

属性	说明	类型
val	数字	Number

@delete()

回退键点击事件

@confirm()

确认键点击事件