开单时轻松算账，Vue 计算器助你高效处理订单

2023-09-22 09:33:11

开单无忧，轻松算账：Vue 计算器助你高效处理订单

在电子商务的日常工作中，开单是一项不可或缺的任务。为了提升开单效率，产品经理往往希望在开单页面嵌入一个计算器，让用户可以轻松处理订单计算。本文将手把手教你使用 Vue.js 构建一个开单计算器，支持加减乘除四则运算，并以弹窗形式呈现。

构建计算器界面

首先，我们需要构建计算器的界面。在 src/App.vue 文件中，我们将创建计算器的基本结构：

<template>
  <div class="calculator">
    <input type="text" v-model="display" readonly />
    <div class="buttons">
      <button @click="numberClick">7</button>
      <button @click="numberClick">8</button>
      <button @click="numberClick">9</button>
      <button @click="operatorClick">+</button>
      <button @click="numberClick">4</button>
      <button @click="numberClick">5</button>
      <button @click="numberClick">6</button>
      <button @click="operatorClick">-</button>
      <button @click="numberClick">1</button>
      <button @click="numberClick">2</button>
      <button @click="numberClick">3</button>
      <button @click="operatorClick">*</button>
      <button @click="numberClick">0</button>
      <button @click="decimalClick">.</button>
      <button @click="clearClick">C</button>
      <button @click="operatorClick">/</button>
      <button @click="equalsClick">=</button>
    </div>
  </div>
</template>

这个模板创建了一个基本的计算器界面，包括显示器、数字按钮、运算符按钮和清除按钮。

实现计算器功能

接下来，我们需要实现计算器功能。在 src/components/Calculator.vue 文件中，我们将编写计算器的逻辑代码：

export default {
  data() {
    return {
      display: '0',
      operand1: null,
      operator: null,
      operand2: null
    };
  },
  methods: {
    numberClick(event) {
      if (this.display === '0') {
        this.display = event.target.textContent;
      } else {
        this.display += event.target.textContent;
      }
    },
    operatorClick(event) {
      this.operand1 = parseFloat(this.display);
      this.operator = event.target.textContent;
      this.display = '0';
    },
    decimalClick() {
      if (!this.display.includes('.')) {
        this.display += '.';
      }
    },
    clearClick() {
      this.display = '0';
      this.operand1 = null;
      this.operator = null;
      this.operand2 = null;
    },
    equalsClick() {
      this.operand2 = parseFloat(this.display);
      let result = 0;
      switch (this.operator) {
        case '+':
          result = this.operand1 + this.operand2;
          break;
        case '-':
          result = this.operand1 - this.operand2;
          break;
        case '*':
          result = this.operand1 * this.operand2;
          break;
        case '/':
          result = this.operand1 / this.operand2;
          break;
      }
      this.display = result;
    }
  }
};

这个脚本实现了计算器功能。它处理数字点击、运算符点击、小数点点击、清除点击和计算结果等操作。

完善计算器样式

最后，我们需要完善计算器的样式。在 src/style.css 文件中，我们将添加以下样式：

.calculator {
  width: 300px;
  height: 400px;
  background-color: #333;
  color: #fff;
  padding: 20px;
}

.display {
  width: 100%;
  height: 50px;
  background-color: #000;
  color: #fff;
  text-align: right;
  font-size: 24px;
  padding: 10px;
  margin-bottom: 20px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

button {
  width: 100%;
  height: 50px;
  background-color: #666;
  color: #fff;
  font-size: 20px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #999;
}