Keyboard | Press UI

# Keyboard

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';

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"
/>

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	-

横屏

← Form PickerPlus →