vue实现计算器封装

下面是“vue实现计算器封装”的完整攻略：

1. 创建计算器组件

首先，我们需要创建一个计算器组件。可以使用 Vue CLI 创建一个基础的 Vue 单文件组件。具体命令如下：

vue create calculator

在 src/components 目录下创建一个 Calculator.vue 文件。在该文件中，我们需要编写计算器组件的 HTML 和 Vue 代码。示例代码如下：

<template>
  <div class="calculator">
    <div class="display">{{ display }}</div>
    <div class="buttons">
      <button v-for="button in buttons" :key="button.text" @click="onClick(button)">{{ button.text }}</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      display: '0',
      buttons: [
        { text: 'AC', type: 'clear' },
        { text: '+/-', type: 'sign' },
        { text: '%', type: 'mod' },
        { text: '÷', type: 'operator' },
        { text: '7', type: 'number' },
        { text: '8', type: 'number' },
        { text: '9', type: 'number' },
        { text: '×', type: 'operator' },
        { text: '4', type: 'number' },
        { text: '5', type: 'number' },
        { text: '6', type: 'number' },
        { text: '-', type: 'operator' },
        { text: '1', type: 'number' },
        { text: '2', type: 'number' },
        { text: '3', type: 'number' },
        { text: '+', type: 'operator' },
        { text: '0', type: 'number' },
        { text: '.', type: 'dot' },
        { text: '=', type: 'equal' },
      ],
    };
  },
  methods: {
    onClick(button) {
      // 处理按钮点击事件
    },
  },
};
</script>

在上面的代码中，我们定义了一个计算器组件 Calculator，包含一个显示屏和若干个按钮。display 属性表示显示屏上的内容，buttons 数组表示计算器的所有按钮。每个按钮都有一个 text 属性和一个 type 属性，其中：

text 表示按钮上的文本；
type 表示按钮的类型，包括数字（number）、小数点（dot）、加号（operator）、减号（operator）、乘号（operator）、除号（operator）、百分号（mod）、取反（sign）、清空（clear）和等于号（equal）。

我们也可以添加更多的按钮类型，例如开方、取根、取对数等。

在 methods 中，我们需要定义一个 onClick 方法，用来处理按钮的点击事件。在这个方法中，我们需要根据按钮类型执行不同的操作，例如计算、清空、添加数字等等。具体实现可以参考下一节。

2. 实现计算器逻辑

在 Calculator.vue 中，我们需要实现 onClick 方法，用来处理按钮的点击事件。具体实现如下：

methods: {
  onClick(button) {
    switch (button.type) {
      case 'clear':
        this.display = '0';
        break;
      case 'sign':
        this.display = -(this.display || 0);
        break;
      case 'mod':
        this.display = this.display / 100;
        break;
      case 'operator':
        if (this.first) {
          this.operator = button.text;
        } else {
          this.second = this.display;
          this.display = this.compute(this.first, this.operator, this.second).toString();
          this.operator = button.text;
          this.first = this.display;
        }
        break;
      case 'number':
        if (this.display === '0' && button.text !== '0') {
          this.display = button.text;
        } else if (this.operator) {
          this.display = button.text;
          this.second = undefined;
        } else {
          this.display += button.text;
        }
        break;
      case 'dot':
        if (this.display.indexOf('.') === -1) {
          this.display += '.';
        }
        break;
      case 'equal':
        this.second = this.display;
        this.display = this.compute(this.first || 0, this.operator, this.second || 0).toString();
        this.first = undefined;
        this.second = undefined;
        this.operator = undefined;
        break;
      default:
        break;
    }
  },
  compute(first, operator, second) {
    switch (operator) {
      case '+':
        return Number(first) + Number(second);
      case '-':
        return first - second;
      case '×':
        return first * second;
      case '÷':
        return first / second;
      default:
        return 0;
    }
  },
},

在上面的代码中，我们使用了一个 switch 语句来根据按钮类型执行不同的操作。

对于“清空”按钮，我们将 display 属性设为“0”。
对于“取反”按钮，我们将 display 属性取反。
对于“百分号”按钮，我们将 display 属性除以 100。
对于“加号”、“减号”、“乘号”和“除号”按钮，我们记录当前操作符，如果前面已有一个操作数和操作符，则执行上一次的计算，并将结果存入 first 属性中，并将 second 属性设为 undefined；如果前面没有操作数，则直接记录当前操作数和操作符并返回。
对于数字按钮，如果 display 属性为“0”且新的数字不为“0”，则直接将新的数字替换“0”；如果已经有操作符，则直接将新的数字替换当前 display 属性，并将 second 属性设为 undefined；否则，直接在 display 属性后面添加新的数字。
对于小数点按钮，如果 display 属性还没有小数点，则在 display 属性后面添加一个小数点。
对于等于号按钮，如果前面已经有一个操作数和操作符，则执行计算并将结果显示，清空 first、second 和 operator 属性。

在 compute 方法中，我们使用 switch 语句来根据操作符执行不同的计算操作。这里我们将结果转换为数字，以确保精度正确。

3. 封装计算器组件

在完成计算器组件的编写和逻辑实现后，我们可以将其封装为一个 npm 包，以供其他人使用。

首先，在项目根目录下执行 npm init 命令，创建一个 package.json 文件。然后，执行 npm login 命令登录 npm 账号。

接下来，创建一个 src/index.js 文件，将计算器组件导出，示例代码如下：

import Calculator from './components/Calculator.vue';

export default Calculator;

然后，在 package.json 文件中添加以下字段：

{
  "main": "dist/calculator.common.js",
  "module": "dist/calculator.esm.js",
  "files": [
    "dist/**/*",
    "src/**/*",
    "LICENSE",
    "README.md"
  ],
  "scripts": {
    "build": "vue-cli-service build --target lib --name calculator src/index.js"
  },
  "peerDependencies": {
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "vue-template-compiler": "^2.6.12"
  }
}

在上面的代码中，我们将 main 和 module 字段设为构建后的文件路径，即 dist/calculator.common.js 和 dist/calculator.esm.js。files 字段表示要发布的文件和目录，scripts 字段表示构建命令。peerDependencies 字段表示该包依赖于 Vue，devDependencies 字段表示构建时需要使用的包。

接下来，执行以下命令构建 npm 包：

npm run build

上面的命令将使用 Vue CLI 构建一个 npm 包。

最后，执行以下命令发布 npm 包：

npm publish

上面的命令将把 npm 包发布到 npm 仓库中。

这样，我们就成功地将计算器组件封装成了一个 npm 包，其他人可以通过 npm install 命令安装并使用该组件。示例代码如下：

npm install my-calculator

import Calculator from 'my-calculator';

Vue.use(Calculator);

接下来，我们可以在自己的 Vue 项目中使用该组件了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue实现计算器封装 - Python技术站

1. 创建计算器组件

2. 实现计算器逻辑

3. 封装计算器组件

相关文章