vue实现计算器封装

本文实例为大家分享了vue实现计算器封装代码，供大家参考，具体内容如下

前言：根据计算器可增添加减乘除的封装可扩展，大家请参照效果如下：

文件目录

我们导入了四个js包，在下面有源代码，当前计算器页只有一个valculator.vue文件。

valculator.vue：<html代码>

template>
  <div class="about">
    <h1>这是个计算器你信吗</h1>
    <van-cell-group type="text">
      <van-field
        οninput="value=value.replace(/[^\d+(+)+(-)+(*)]/g, '').replace(/^0{1,}/g,'')"
        v-model="inputValue"
        placeholder="请输入数字"
      />
    </van-cell-group>
    <div style="margin-top:20%">
      <van-grid clickable :column-num="4" :gutter="10">
        <van-grid-item @click="onclick(i)" v-for="(num, i) in dataNum" :key="i" :text="dataNum[i]" />
      </van-grid>
    </div>
  </div>
</template>

valculator.vue：《js方法》

<script>
// eslint-disable-next-line no-unused-vars
import { Field } from 'vant'
export default {
  data () {
    return {
      // 数字加减乘除数组
      dataNum: [
        '+',
        '-',
        '*',
        '/',
        '1',
        '2',
        '3',
        '< X',
        '4',
        '5',
        '6',
        '=',
        '7',
        '8',
        '9',
        '0'
      ],
      inputValue: '', // input当前显示值
      inputStorage: '', // input输入值存储
      calculator: '', // 解析拿到的值

      temporaryVariables1: '', // 存储临时计算拼接值1
      temporaryVariables2: '', // 存储临时计算拼接值2
      temporaryOperator: '' // 存储临时运算符
    }
  },
  methods: {
    // 点击事件
    onclick (index) {
      this.parsing(index) // 解析当前的值
      this.judge() // 判断进行运算
    },

    // 解析当前拿到的值
    parsing (index) {
      switch (index) {
        case 4:
          this.calculator = '1'
          break
        case 5:
          this.calculator = '2'
          break
        case 6:
          this.calculator = '3'
          break
        case 8:
          this.calculator = '4'
          break
        case 9:
          this.calculator = '5'
          break
        case 10:
          this.calculator = '6'
          break
        case 12:
          this.calculator = '7'
          break
        case 13:
          this.calculator = '8'
          break
        case 14:
          this.calculator = '9'
          break
        case 15:
          this.calculator = '0'
          break
        case 0:
          this.calculator = '+'
          break
        case 1:
          this.calculator = '-'
          break
        case 2:
          this.calculator = '*'
          break
        case 3:
          this.calculator = '/'
          break
        case 11:
          this.calculator = '='
          break
        case 7:
          this.calculator = 'X'
          this.Clear()
          break
        default:
          break
      }

      //   this.outValue = this.calculator;
      //   this.inputBox();
      //   console.log(this.calculator);
    },

    // 判断是哪个运算符
    judge () {
      if (this.calculator === '=') {
        this.equal()
      } else if (this.calculator === 'X') {
        this.Clear()
      } else {
        this.showOn() // 显示当前的值
        this.calculation() // 计算当前的值
      }
    },

    // 计算当前的值
    calculation () {
      // 如果为空表示当前为第一个运算符,否则开始计算

      const vae = this.isNumber(this.calculator) // 判断当前输入值是否为数字
      if (this.temporaryOperator === '') {
        if (vae === false) {
          this.temporaryOperator = this.calculator // 存储当前计算值
        } else {
          this.temporaryVariables1 += this.calculator // 计算的值：加减触发前拼接的值
        }
      } else {
        if (vae === false) {
          this.temporaryVariables1 = this.Retrieval.retrieval(
            this.temporaryOperator,
            this.temporaryVariables1,
            this.temporaryVariables2
          ) // 如果当前有输入运算法调取加减乘除

          this.assignmentConversion() // 清空第二个数
          this.temporaryOperator = this.calculator // 计算完后保留当前的运算符
        } else {
          this.temporaryVariables2 += this.calculator // 继续第二个拼接
        }
      }
    },

    // 判断是否为数字：“12.3”等都为true， “哈哈”、“12.33”等都为false
    isNumber (val) {
      var regPos = /^\d+(\.\d+)?$/ // 非负浮点数
      var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true
      } else {
        return false
      }
    },

    // 等于
    equal () {
      this.temporaryVariables1 = this.Retrieval.retrieval(
        this.temporaryOperator,
        this.temporaryVariables1,
        this.temporaryVariables2
      ) // 调取加减乘除
      this.assignmentConversion() // 清空第二个数
      this.inputValue = this.temporaryVariables1 // 将计算后的值显示在屏幕上
      this.inputStorage = '' // 清空之前存储的值
    },

    // 清空第二个数
    assignmentConversion () {
      this.temporaryVariables2 = '' // 第二个清空用来再次保留
    },

    // 清除显示的数据
    Clear () {
      this.inputValue = '' // 显示的值
      this.inputStorage = '' // input输入值存储
      this.calculator = '' // 解析拿到的值

      this.temporaryVariables1 = '' // 存储临时计算拼接值1
      this.temporaryVariables2 = '' // 存储临时计算拼接值2
      this.temporaryOperator = '' // 存储临时运算符
    },

    // 显示当前的值
    showOn () {
      this.inputValue = this.inputStorage // 之前存储先赋给要显示的
      this.inputValue += this.calculator // 要显示的值再次加上当前点击的值
      this.inputStorage = this.inputValue // 同步要存储的值
    }
  }
}

valculator.vue：《style》

<style scoped>
div.inputAll {
  position: relative;
}

div.inputOne {
  position: absolute;
  top: 10%;
  /* border-bottom:1px solid gray; */
}

div.inputTwo {
  position: absolute;
  top: 15%;
}

div.inputLine {
  border-bottom: 1px solid gray;
  top: 12.5%;
  position: absolute;
}
</style>

导入其他js文件:

retrieval.js：计算器加减乘除选择器

// eslint-disable-next-line no-unused-vars
import Add from '../valculator/add'
// eslint-disable-next-line no-unused-vars
import Subtraction from '../valculator/subtraction'
import Multiplication from '../valculator/multiplication'
export default {
  retrieval: function (operator, variables1, variables2) {
    switch (operator) {
      case '+':
        // 调取公共加法
        // eslint-disable-next-line no-undef
        variables1 = Add.add(variables1, variables2)
        break
      case '-':
        // 调取公共减法
        // eslint-disable-next-line no-undef
        variables1 = Subtraction.subtraction(variables1, variables2)
        break
      // eslint-disable-next-line no-duplicate-case
      case '*':
        // 调取公共乘法
        // eslint-disable-next-line no-undef
        variables1 = Multiplication.multiplication(variables1, variables2)
        break
      default:
        break
    }
    return variables1
  }
}

add.js：加法操作

export default {
  add: function (addOne, addTwo) {
    // eslint-disable-next-line no-unused-vars
    addOne = Number(addOne) + Number(addTwo) // 显示当前的值
    return addOne
  }
}

multiplication.js：乘法操作

export default {
  multiplication: function (addOne, addTwo) {
    // eslint-disable-next-line no-unused-vars
    addOne = Number(addOne) * Number(addTwo) // 显示当前的值
    return addOne
  }
}

subtraction.js：减法操作

export default {
  subtraction: function (addOne, addTwo) {
    // eslint-disable-next-line no-unused-vars
    addOne = Number(addOne) - Number(addTwo) // 显示当前的值
    return addOne
  }
}

总结：

我们对于加减同一级别的代码可以自己添加一个js文件，然后retrieval.js里面写进入即可，当然我们最好将这个js文件换成xml就可以实现仿反射+配置文件了，对于乘除法我们需要进一步更改计算器为每次都是两个计算，不可以一次性输入很多数字，这样可以避免开优先级问题，当然我们要做成优先级是我们很重要的学习理论依据。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。