Mobile Numeric Keyboard For Vue.js 2

Install & Download:

# Yarn
$ yarn add vue-numeric-keyboard
# NPM
$ npm install vue-numeric-keyboard --save

Description:

A customizable, themeable numeric keyboard component for Vue.js 2 app.

How to use it:

Import and create a new Vue app.

import Vue from 'vue'
import App from './app.vue'
new Vue({
  el: '#app',
  render: h => h(App)
})

The component html template.

<template>
  <NumericKeyboard layout="tel" :theme="telTheme" entertext="send" @press="press"></NumericKeyboard>
  <p v-if="keyPressed == null" class="keyboard-output">Press the keyboard</p>
  <p v-else class="keyboard-output">Key({{keyPressed}}) is pressed</p>
  <NumericInput type="number" placeholder="touch to input" :value="amount" @input="input" />
  <NumericInput type="number" placeholder="touch to input" format="^\d+(\.\d{0,2})?$" :value="amount2" @input="input2" />
</template>

The JavaScript.

import { NumericKeyboard, NumericInput, keys } from 'vue-numeric-keyboard/lib'
export default {
  components: {
    NumericKeyboard,
    NumericInput
  },
  data() {
    return {
      amount: 0,
      amount2: 0,
      telTheme: {
        key: {
          [keys.DEL]: {
            color: '#ffffff',
            backgroundColor: ['#a8b0bc', '#929ba8']
          },
          [keys.ENTER]: {
            color: '#ffffff',
            backgroundColor: ['#a8b0bc', '#929ba8']
          }
        }
      },
      keyPressed: null,
    }
  },
  methods: {
    press(key) {
      this.keyPressed = key
    },
    input(value) {
      this.amount = value
    },
    input2(value) {
      this.amount2 = value
    },
    reset() {
      this.amount = 10
    }
  }
}

Default props.

layout: {
  type: [String, Array],
  default: 'number' // number and tel
},
theme: {
  type: [String, Object],
  default: 'default'
},
entertext: {
  type: String,
  default: 'enter'
}