BusinessBenchmark/src/components/knowledgePage/counterPage.vue

<template>
    <el-dialog title="公式计算器" v-model="showCounterPage" width="400px" append-to-body :show-close="false" :close-on-click-modal="false">
        <div class="counter">
            <input type="text" disabled="disabled" v-model="counterStr">
            <div class="countBtn">
                <span v-for="item in countBox" :key="item.label" @click="haveNum(item.label)">{{item.label}}</span>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            counterStr: '',
            showCounterPage: false,
            countBox: []
        }
    },
    created() {
        this.countBox = [
            {
                label: '清空'
            },
            {
                label: '撤销'
            },
            {
                label: '&'
            },
            {
                label: '|'
            },
            {
                label: '('
            },
            {
                label: '7'
            },
            {
                label: '8'
            },
            {
                label: '9'
            },
            {
                label: '÷'
            },
            {
                label: ')'
            },
            {
                label: '4'
            },
            {
                label: '5'
            },
            {
                label: '6'
            },
            {
                label: '×'
            },
            {
                label: '@'
            },
            {
                label: '1'
            },
            {
                label: '2'
            },
            {
                label: '3'
            },
            {
                label: '-'
            },
            {
                label: '%'
            },
            {
                label: '0'
            },
            {
                label: '.'
            },
            {
                label: '+'
            },
            {
                label: '='
            },
            {
                label: '确认'
            }
        ]
    },
    methods: {
        init(val) {
            this.showCounterPage = true
            this.counterStr = val
        },
        haveNum(val) {
            if (val === '撤销' && this.counterStr.length>0) {
                this.counterStr = this.counterStr.substring(0, this.counterStr.length-1)
            } else if(val === '清空') {
                this.counterStr = ''
            } else if(val === '确认') {
                this.$emit('counterStr', this.counterStr)
                this.showCounterPage = false
            } else {
                this.counterStr += val
            }
        }
    }
}
</script>

<style lang="less">
.el-overlay{
    .el-dialog{
        .el-dialog__body{
            padding: 30px;
            .counter{
                input{
                    width: calc(100% - 4px);
                    height: 50px;
                }
                .countBtn{
                    span{
                        display:inline-block;
                        width: 66px;
                        height: 66px;
                        border: 1px solid #dcdfe6;
                        text-align: center;
                        line-height: 70px;
                        cursor: pointer;
                        &:hover{
                            background-color: #67C23A;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}
</style>