vue中实现简易计算器

演示

代码

<template>
  <div style="width: 260px; height: 75px; border: silver 1px solid">
    <div style="float: right;" :class="this.eq === '' ? 'eqBeforeCompute' : 'eqCompute'">{{ this.value }}</div><br>
    <div style="float: right; font-size: x-large; font-weight: bold">{{ this.eq }}</div>
  </div>
  <div style="width: 250px;">
    <el-button-group style="width: 250px; display: flex; align-items: center">
      <el-button style="height: 50px" class="calculator-button" text @click="compute('(')">(</el-button>
      <el-button style="height: 50px" class="calculator-button" text @click="compute(')')">)</el-button>
      <el-button style="height: 50px" class="calculator-button" text @click="compute('C')">C</el-button>
      <el-button style="height: 50px" class="calculator-button" text @click="compute('Del')">
        <el-icon><CircleClose /></el-icon>
      </el-button>
    </el-button-group>
    <el-button-group style="width: 250px; display: flex; align-items: center">
      <el-button style="height: 50px" class="calculator-button-num" @click="compute('7')">7</el-button>
      <el-button style="height: 50px" class="calculator-button-num" @click="compute('8')">8</el-button>
      <el-button style="height: 50px" class="calculator-button-num" @click="compute('9')">9</el-button>
      <el-button type="warning" style="height: 50px; font-size: x-large" class="calculator-button" text @click="compute('÷')">÷</el-button>
    </el-button-group>
    <el-button-group style="width: 250px; display: flex; align-items: center">
      <el-button style="height: 50px" class="calculator-button-num" @click="compute('4')">4</el-button>
      <el-button style="height: 50px" class="calculator-button-num" @click="compute('5')">5</el-button>
      <el-button style="height: 50px" class="calculator-button-num" @click="compute('6')">6</el-button>
      <el-button type="warning" style="height: 50px; font-size: x-large" class="calculator-button" text @click="compute('×')">×</el-button>
    </el-button-group>
    <el-button-group style="width: 250px; display: flex; align-items: center">
      <el-button style="height: 50px" class="calculator-button-num" @click="compute('1')">1</el-button>
      <el-button style="height: 50px" class="calculator-button-num" @click="compute('2')">2</el-button>
      <el-button style="height: 50px" class="calculator-button-num" @click="compute('3')">3</el-button>
      <el-button type="warning" style="height: 50px; font-size: x-large" class="calculator-button" text @click="compute('-')">-</el-button>
    </el-button-group>
    <el-button-group style="width: 250px; display: flex; align-items: center">
      <el-button style="height: 50px" class="calculator-button-num" @click="compute('0')">0</el-button>
      <el-button style="height: 50px; font-size: x-large" class="calculator-button-num" @click="compute('.')">.</el-button>
      <el-button type="warning" style="height: 50px; font-size: x-large" class="calculator-button" text @click="compute('+')">+</el-button>
      <el-button style="background: #1c84c6; height: 50px; font-size: x-large" class="calculator-button" text @click="compute('=')">=</el-button>
    </el-button-group>
    <el-button-group style="width: 250px; display: flex; align-items: center">

    </el-button-group>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      value: '',
      eq: ''
    }
  },
  methods: {
    compute(num) {
      if (this.eq !== '') {
        this.eq = '';
        this.value = '';
      }
      if (this.isOperator(this.value.slice(-1)) && this.isOperator(num)) {
        return;
      }
      if (num === 'C') {
        this.eq = '';
        this.value = '';
      } else if (num === 'Del') {
        this.value = this.value.slice(0, -1);
      } else if (num === '=') {
        this.isBrackets(this.value)
        try {
          this.eq = eval(this.value
            .replaceAll('×', '*')
            .replaceAll('÷', '/'));
        } catch (e) {
          this.eq = '出错';
        }
        this.value = this.value + num;
      } else {
        if (this.value === '' && this.isOperator(num)) {
          return;
        }
        this.value = this.value + num
      }
    },
    isOperator(str) {
      const operators = ['+', '-', '×', '÷', '%', '.'];
      return operators.includes(str);
    },
    isBrackets(str) {
      const leftBrackets = str.split('(').length - 1;
      const rightBrackets = str.split(')').length - 1;
      if (leftBrackets !== 0 && leftBrackets !== rightBrackets) {
        for (let i = 0; i < leftBrackets; i++) {
          this.value = this.value + ')';
        }
      } else if (rightBrackets !== 0 && leftBrackets !== rightBrackets) {
        for (let i = 0; i < rightBrackets; i++) {
          this.value = '(' + this.value;
        }
      }
    }
  }
}
</script>

<style scoped>
.calculator-button {
  text-align: center;
  font-size: larger;
  font-weight: bold;
  width: 65px;
  height: 50px;
}

.calculator-button-num {
  text-align: center;
  font-size: larger;
  width: 65px;
  height: 50px;
  font-weight: bold;
}
.eqBeforeCompute {
  font-size: x-large;
}
.eqCompute {
  font-size: small;
  color: #5a5e66;
}
</style>