• NumberKeyboard 数字键盘
    • 引入
  • 代码演示
    • 默认样式
    • 自定义样式
  • API
    • Props
    • Events
    • Slots

    NumberKeyboard 数字键盘

    引入

    1. import { NumberKeyboard } from 'vant';
    2. Vue.use(NumberKeyboard);

    代码演示

    默认样式

    1. <van-button @touchstart.stop="show = true">
    2. 弹出默认键盘
    3. </van-button>
    4. <van-number-keyboard
    5. :show="show"
    6. extra-key="."
    7. close-button-text="完成"
    8. @blur="show = false"
    9. @input="onInput"
    10. @delete="onDelete"
    11. />
    1. export default {
    2. data() {
    3. return {
    4. show: true
    5. }
    6. },
    7. methods: {
    8. onInput(value) {
    9. Toast(value);
    10. },
    11. onDelete() {
    12. Toast('删除');
    13. }
    14. }
    15. }

    自定义样式

    1. <van-number-keyboard
    2. :show="show"
    3. theme="custom"
    4. extra-key="."
    5. close-button-text="完成"
    6. @blur="show = false"
    7. @input="onInput"
    8. @delete="onDelete"
    9. />

    API

    Props

    参数说明类型默认值版本
    show是否显示键盘Boolean--
    theme样式风格,可选值为 default customStringdefault-
    title键盘标题String--
    transition是否开启过场动画Booleantrue-
    z-index键盘 z-indexNumber100-
    extra-key左下角按键内容String''-
    close-button-text关闭按钮文字,空则不展示String--
    delete-button-text删除按钮文字String删除1.4.3
    show-delete-key是否展示删除按钮Booleantrue-
    hide-on-click-outside点击外部时是否收起键盘Booleantrue-
    safe-area-inset-bottom是否开启 iPhone X 底部安全区适配,需要在 viewport meta 标签中设置 viewport-fit=coverBooleanfalse1.6.15

    Events

    事件名说明回调参数
    input点击按键时触发key: 按键内容
    delete点击删除键时触发-
    close点击关闭按钮时触发-
    blur点击关闭按钮或非键盘区域时触发-
    show键盘完全弹出时触发-
    hide键盘完全收起时触发-

    Slots

    名称说明
    delete自定义删除按钮内容
    title-left自定义标题栏左侧内容

    NumberKeyboard 数字键盘 - 图1