vue-input-number-keyboard

数字键盘组件/Input number component

API

Props

name	type	default	description
show	Boolean	false	Toggle keyboard

Methods

name	params	description
Input		get input value

GIF

Usage

npm install vue-input-number-keyboard

main.js

import vueInputNumberKeyboard from "vue-input-number-keyboard"
Vue.use(vueInputNumberKeyboard)

A.vue

<template>
    <vueInputNumberKeyboard :show="showKeyboard" @Input="getValue"></vueInputNumberKeyboard>
    <button @click="toggle">ON/OFF</button>
    <h1>{{str}}</h1>
</template>

<script>
    export default {
        name: "app",
        data() {
            return {
                showKeyboard: false,
                arr: []
            };
        },
        computed:{
            str(){
                return this.arr.join("")
            }
        },
        methods: {
            toggle() {
                this.showKeyboard = !this.showKeyboard;
            },
            getValue(val) {
                if (val !== "del") {
                    this.arr.push(val);
                } else {
                    this.arr.pop();
                }
            }
        }
    };
</script>