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就可以實現仿反射+配置文件了，對於乘除法我們需要進一步更改計算器爲每次都是兩個計算，不可以一次性輸入很多數字，這樣可以避免開優先級問題，當然我們要做成優先級是我們很重要的學習理論依據。