使用el-dialog封装的一个简易数字输入面板

<template>
    <el-dialog class="num-input-dialog" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" width="31vw" :modal="false">
        <div class="num-input-dialog-main">
            <div class="num-input">
                <el-input v-model="input" placeholder="" readonly>
                    <template slot="prepend">{{ signSymbol ? '+' : '-' }}</template>
                </el-input>
            </div>
            <div class="num-input-buttons">
                <div @click="addStr('1')" class="num-input-button num-input-span1">{{'1'}}</div>
                <div @click="addStr('2')" class="num-input-button num-input-span1">{{'2'}}</div>
                <div @click="addStr('3')" class="num-input-button num-input-span1">{{'3'}}</div>
                <div @click="visible = false" class="num-input-button num-input-span2 grey-bg">{{'⌨'}}</div>
                <div @click="addStr('4')" class="num-input-button num-input-span1">{{'4'}}</div>
                <div @click="addStr('5')" class="num-input-button num-input-span1">{{'5'}}</div>
                <div @click="addStr('6')" class="num-input-button num-input-span1">{{'6'}}</div>
                <div @click="setValue" class="num-input-button num-input-span2 grey-bg">{{'√'}}</div>
                <div @click="addStr('7')" class="num-input-button num-input-span1">{{'7'}}</div>
                <div @click="addStr('8')" class="num-input-button num-input-span1">{{'8'}}</div>
                <div @click="addStr('9')" class="num-input-button num-input-span1">{{'9'}}</div>
                <div @click="delStr()" class="num-input-button num-input-span2">{{'⌫'}}</div>
                <div @click="signSymbolChange" class="num-input-button num-input-span1" :style="{cursor: signSymbolSwitch ? 'pointer' : 'not-allowed'}">{{'±'}}</div>
                <div @click="addStr('0')" class="num-input-button num-input-span1">{{'0'}}</div>
                <div @click="addStr('.')" class="num-input-button num-input-span1">{{'.'}}</div>
                <div class="num-input-button num-input-span1 disabled">{{'<'}}</div>
                <div class="num-input-button num-input-span1 disabled">{{'>'}}</div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'NumInput',
    props: {
        signSymbolSwitch: {
            type: Boolean,
            default: true
        },
    },
    data() {
        return {
            signSymbol: true, // 正负符号 + true / - false
            visible: false,
            key: "",
            input: "",
            cursorIndex: 0,
        }
    },
    watch: {
        visible() {
            if (this.visible) {
                this.input = "";
                this.cursorIndex = 0;
                this.signSymbol = true;
            }
        },
    },
    methods: {
        // 更改正负
        signSymbolChange() {
            if (this.signSymbolSwitch) {
                this.signSymbol = !this.signSymbol;
            }
        },
        // 将值回填
        setValue() {
            if (this.input) {
                let value = this.signSymbol ? Number(this.input) : -Number(this.input);
                this.$emit("confirm", value, this.key);
                // console.log("value", value, this.key);
            }
            this.visible = false;
        },
        // 输入
        addStr(str) {
            this.input += str;
        },
        delStr() {
            if (this.input.length) {
                this.input = this.input.slice(0, this.input.length - 1);
            }
        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep.num-input-dialog {
    .el-dialog__header {
        display: none;
    }
    .el-dialog__body {
        padding: 10px;
        background-color: #ccc;
        opacity: 0.8;
        .num-input-dialog-main {
            width: 31vw;
            height: 28vw;
            .num-input {
                width: 30vw;
                height: 5vh;
            }
            .num-input-buttons {
                .num-input-button {
                    float: left;
                    height: 5vw;
                    margin: 0.5vw;
                    background-color: #eee;
                    border-radius: 5px;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 2vh;
                    color: #000;
                    cursor: pointer;
                    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
                }
                .num-input-button:hover {
                    background-color: #ddd;
                }
                .num-input-button:active {
                    background-color: #eee;
                    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
                }
                .num-input-span1 {
                    width: 5vw;
                }
                .num-input-span2 {
                    width: 11vw;
                }
                .grey-bg {
                    background-color: gray;
                }
                .disabled {
                    cursor: not-allowed;
                }
            }
        }
    }
}
</style>