Press UI

# NumberKeyboard

A virtual keyboard component that includes number mode (with or without decimal mark) and ID number mode, and can be used with CodeInput or Field component.

# Import

import PressNumberKeyboard from 'press-ui/press-number-keyboard/press-number-keyboard.vue';

export default {
  components: {
    PressNumberKeyboard,
  }
}

# Usage

# Basic Usage

<PressNumberKeyboard
  :mode="number"
  :show="show"
  @change="onChange"
  @backspace="onBackspace"
  @close="onClose"
/>

export default {
  data() {
    return {
      show: true,
    }
  },
  methods: {
    onChange(val) {
      console.log('change', val);
    },
    onChange() {
      console.log('backspace');
    },
    onClose() {
      this.show = false;
    }
  }
};

# Number Keyboard with Decimal Mark

Set mode prop to accounting to show a number keyboard wih decimal mark. Use decimal-mark prop to customize the decimal mark.

<PressNumberKeyboard
  :mode="accounting"
  :show="show"
  :decimal-mark=","
  @change="onChange"
  @backspace="onBackspace"
  @close="onClose"
/>

# ID Number Keyboard

Set mode to card to show a keyboard for entering ID number.

<PressNumberKeyboard
  :mode="card"
  :show="show"
  @change="onChange"
  @backspace="onBackspace"
  @close="onClose"
/>

# Keyboard with Topbar

Set toolbar prop to true to show the topbar. Use cancel-button-text and confirm-button-text to set the content of the cancel button and the confirm button.

<PressNumberKeyboard
  :mode="number"
  :show="show"
  :toolbar="true"
  :confirm-button-text="Done"
  @change="onChange"
  @backspace="onBackspace"
  @close="onClose"
/>

# Keyboard with Title

Use title prop to set the keyboard title.

<PressNumberKeyboard
  :mode="number"
  :show="show"
  :toolbar="true"
  :title="Number Keyboard"
  @change="onChange"
  @backspace="onBackspace"
  @close="onClose"
/>

# Random Key Order

Set random prop to true to shuffle the order of keys.

<PressNumberKeyboard
  :mode="number"
  :show="show"
  :random="true"
  @change="onChange"
  @backspace="onBackspace"
  @close="onClose"
/>

# Bind Value

Use v-model to bind value and use max-length prop to set the maximum input length.

<PressNumberKeyboard
  v-model="value"
  :mode="number"
  :show="show"
  :max-length="6"
  @close="onClose"
/>

export default {
  data() {
    return {
      value: '',
      show: true,
    }
  },
  methods: {
    onClose() {
      this.show = false;
    }
  }
};

# API

# Props

Parameter Description Type Default
mode Mode of the keybord, can be number, accounting or card string number
show Whether to show the keyboard boolean false
toolbar Whether to show the toolbar boolean false
cancel-button-text Cacncel button text string -
confirm-button-text Confirm button text string Confirm
title Keyboard title string -
decimal-mark Customize the decimal Mark string .
random Whether to shuffle the order of keys boolean false
max-length Maximum input length (a negative value means no constraint) number -1
z-index Keyboard z-index number 100
round Whether to show rounded corners (enabled by default if toolbar is true) boolean -
safe-area-inset-bottom Whether to enable bottom safe area adaptation boolean true

# Events

Event Description Callback Parameters
change Emitted when a key is pressed val: input key value
backspace Emitted when the backspace key is pressed -
close Emitted when the area outside the keyboard is pressed -
cancel Emitted when the cancel button is pressed -
confirm Emitted when the confirm button is pressed -
横屏

← PasswordInput →