Keypad.vue

<template>
    <transition name="slide">
        <md-whiteframe class="keypad" v-if="show">
            <div class="keypad-row">
                <input type="text" class="keypad-input" v-model="displayValue">
            </div>

            <div class="keypad-row" v-for="(row, index) in keys">
                <span
                    class="keypad-key has-ripple"
                    v-for="(key, index) in row"
                    v-html="'<md-ink-ripple></md-ink-ripple>' + key.text"
                    @click="key.method(key)">
                </span>
            </div>

            <div class="keypad-row">
                <span class="keypad-key" @click="confirm">
                    Enter
                </span>
            </div>
        </md-whiteframe>
    </transition>
</template>

<script>
    export default {
        props: {
            currency: {
                type: String,
                default: ''
            },

            autocomplete: {
                type: Number,
                default: -1
            }
        },

        data() {
            return {
                value: '',
                show: false,
                keys: [
                    [
                        {text: '7', method: this.handleKey},
                        {text: '8', method: this.handleKey},
                        {text: '9', method: this.handleKey}
                    ],
                    [
                        {text: '4', method: this.handleKey},
                        {text: '5', method: this.handleKey},
                        {text: '6', method: this.handleKey}
                    ],
                    [
                        {text: '1', method: this.handleKey},
                        {text: '2', method: this.handleKey},
                        {text: '3', method: this.handleKey}
                    ],
                    [
                        {text: '0', method: this.handleKey},
                        {text: '00', method: this.handleKey},
                        {text: '<i class="material-icons" style="line-height:inherit">backspace</i>', method: this.backspace}
                    ]
                ]
            };
        },

        computed: {
            displayValue() {
                return this.currency ? this.formatAsCurrency(this.value) : this.value;
            }
        },

        methods: {
            handleKey(key) {
                this.value += key.text;

                if (this.isAutoCompleted()) {
                    this.confirm();
                }

                this.$emit('keypress', {
                    key: key,
                    value: this.value
                });
            },

            backspace(key) {
                this.value = this.value.slice(0, -1);
            },

            confirm() {
                alert(this.value);
            },

            formatAsCurrency(value) {
                let langage = (navigator.language || navigator.browserLanguage).split('-')[0];

                return (value / 100).toLocaleString(langage, {
                    style: 'currency',
                    currency: this.currency
                });
            },

            isAutoCompleted() {
                return this.autocomplete != -1 && this.value.length == this.autocomplete;
            }
        },

        created() {
            this.$on('keypad', (state) => this.show = state);
        }
    }
</script>

<style lang="scss" scoped>
    .keypad {
        position: fixed;
        width: 300px;
        left: calc(50% - 150px);
        right: calc(50% - 150px);
        bottom: 5%;
        z-index: 1000;

        .keypad-input {
            display: flex;
            flex: 1;
            border: none;
            border-bottom: 1px solid #eee;
            padding: 2.5vh 0;
            text-align: center;
            font-size: 22px;
            outline: 0;
        }

        .keypad-row {
            display: flex;
            flex: 1;

            .keypad-key {
                display: flex;
                flex: 1;
                height: 10vh;
                line-height: 10vh;
                justify-content: center;
                font-size: 22px;
                cursor: pointer;
                user-select: none;

                &.has-ripple {
                    position: relative;
                }

                &:hover {
                    background: #f2f2f2;
                }
            }
        }
    }

    .slide-enter-active, .slide-leave-active {
        transition: bottom .25s cubic-bezier(.55, 0, .1, 1);
    }

    .slide-enter, .slide-leave-to {
        bottom: -100%;
    }
</style>