FS-UI v0.1.33

NumberKeyboard 数字键盘

使用指南

import { NumberKeyboard } from 'fs-ui'
export default {
  components: {
    fsNumberKeyboard: NumberKeyboard
  }
}
1
2
3
4
5
6

代码演示

默认样式

<fs-number-keyboard
  :show="show"
  title="数字键盘"
  @blur="blurEvent"
  @input="inputEvent"
  @delete="deleteEvent"/>
1
2
3
4
5
6
export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    blurEvent () {
      this.show = false
      console.log('blur')
    },
    inputEvent (text) {
      console.log(text)
    },
    deleteEvent () {
      console.log('delete')
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

自定义样式

<fs-number-keyboard
  :show="show"
  theme="custom"
  @blur="show = false"
  @input="inputEvent"
  @delete="deleteEvent"/>
1
2
3
4
5
6

付呗样式键盘

<fs-number-keyboard
  :show="show3"
  theme="fubei"
  @blur="show3 = false"
  @input="inputEvent"
  @delete="deleteEvent"/>
1
2
3
4
5
6

属性

属性 说明 类型 默认值
show 是否显示弹框 Boolean -
title 键盘标题 String -
close-button-text 关闭按钮文字，空则不展示 String 完成
delete-button-text 删除按钮文字 String 删除
theme 样式风格，可选值为 default custom String default
extraKey 左下角按键内容 String .
overlay 是否显示遮罩层 Boolean true

事件

事件 说明 返回值
input 点击按键时触发 key: 按键内容
delete 点击删除键时触发 -
close 点击关闭按钮时触发 -
blur 点击关闭按钮或非键盘区域时触发 -

← PssswordInput 密码框 →