vue實現(xiàn)計算器封裝

更新時間：2022年04月15日 13:51:24 作者：@Herry

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)計算器的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)計算器封裝代碼，供大家參考，具體內(nèi)容如下

前言：根據(jù)計算器可增添加減乘除的封裝可擴展，大家請參照效果如下：

文件目錄

我們導(dǎo)入了四個js包，在下面有源代碼，當(dāng)前計算器頁只有一個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="請輸入數(shù)字"
? ? ? />
? ? </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 {
? ? ? // 數(shù)字加減乘除數(shù)組
? ? ? dataNum: [
? ? ? ? '+',
? ? ? ? '-',
? ? ? ? '*',
? ? ? ? '/',
? ? ? ? '1',
? ? ? ? '2',
? ? ? ? '3',
? ? ? ? '< X',
? ? ? ? '4',
? ? ? ? '5',
? ? ? ? '6',
? ? ? ? '=',
? ? ? ? '7',
? ? ? ? '8',
? ? ? ? '9',
? ? ? ? '0'
? ? ? ],
? ? ? inputValue: '', // input當(dāng)前顯示值
? ? ? inputStorage: '', // input輸入值存儲
? ? ? calculator: '', // 解析拿到的值

? ? ? temporaryVariables1: '', // 存儲臨時計算拼接值1
? ? ? temporaryVariables2: '', // 存儲臨時計算拼接值2
? ? ? temporaryOperator: '' // 存儲臨時運算符
? ? }
? },
? methods: {
? ? // 點擊事件
? ? onclick (index) {
? ? ? this.parsing(index) // 解析當(dāng)前的值
? ? ? this.judge() // 判斷進(jìn)行運算
? ? },

? ? // 解析當(dāng)前拿到的值
? ? 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() // 顯示當(dāng)前的值
? ? ? ? this.calculation() // 計算當(dāng)前的值
? ? ? }
? ? },

? ? // 計算當(dāng)前的值
? ? calculation () {
? ? ? // 如果為空表示當(dāng)前為第一個運算符,否則開始計算

? ? ? const vae = this.isNumber(this.calculator) // 判斷當(dāng)前輸入值是否為數(shù)字
? ? ? if (this.temporaryOperator === '') {
? ? ? ? if (vae === false) {
? ? ? ? ? this.temporaryOperator = this.calculator // 存儲當(dāng)前計算值
? ? ? ? } else {
? ? ? ? ? this.temporaryVariables1 += this.calculator // 計算的值：加減觸發(fā)前拼接的值
? ? ? ? }
? ? ? } else {
? ? ? ? if (vae === false) {
? ? ? ? ? this.temporaryVariables1 = this.Retrieval.retrieval(
? ? ? ? ? ? this.temporaryOperator,
? ? ? ? ? ? this.temporaryVariables1,
? ? ? ? ? ? this.temporaryVariables2
? ? ? ? ? ) // 如果當(dāng)前有輸入運算法調(diào)取加減乘除

? ? ? ? ? this.assignmentConversion() // 清空第二個數(shù)
? ? ? ? ? this.temporaryOperator = this.calculator // 計算完后保留當(dāng)前的運算符
? ? ? ? } else {
? ? ? ? ? this.temporaryVariables2 += this.calculator // 繼續(xù)第二個拼接
? ? ? ? }
? ? ? }
? ? },

? ? // 判斷是否為數(shù)字：“12.3”等都為true， “哈哈”、“12.33”等都為false
? ? isNumber (val) {
? ? ? var regPos = /^\d+(\.\d+)?$/ // 非負(fù)浮點數(shù)
? ? ? var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 負(fù)浮點數(shù)
? ? ? if (regPos.test(val) || regNeg.test(val)) {
? ? ? ? return true
? ? ? } else {
? ? ? ? return false
? ? ? }
? ? },

? ? // 等于
? ? equal () {
? ? ? this.temporaryVariables1 = this.Retrieval.retrieval(
? ? ? ? this.temporaryOperator,
? ? ? ? this.temporaryVariables1,
? ? ? ? this.temporaryVariables2
? ? ? ) // 調(diào)取加減乘除
? ? ? this.assignmentConversion() // 清空第二個數(shù)
? ? ? this.inputValue = this.temporaryVariables1 // 將計算后的值顯示在屏幕上
? ? ? this.inputStorage = '' // 清空之前存儲的值
? ? },

? ? // 清空第二個數(shù)
? ? assignmentConversion () {
? ? ? this.temporaryVariables2 = '' // 第二個清空用來再次保留
? ? },

? ? // 清除顯示的數(shù)據(jù)
? ? Clear () {
? ? ? this.inputValue = '' // 顯示的值
? ? ? this.inputStorage = '' // input輸入值存儲
? ? ? this.calculator = '' // 解析拿到的值

? ? ? this.temporaryVariables1 = '' // 存儲臨時計算拼接值1
? ? ? this.temporaryVariables2 = '' // 存儲臨時計算拼接值2
? ? ? this.temporaryOperator = '' // 存儲臨時運算符
? ? },

? ? // 顯示當(dāng)前的值
? ? showOn () {
? ? ? this.inputValue = this.inputStorage // 之前存儲先賦給要顯示的
? ? ? this.inputValue += this.calculator // 要顯示的值再次加上當(dāng)前點擊的值
? ? ? 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>

導(dǎo)入其他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 '+':
? ? ? ? // 調(diào)取公共加法
? ? ? ? // eslint-disable-next-line no-undef
? ? ? ? variables1 = Add.add(variables1, variables2)
? ? ? ? break
? ? ? case '-':
? ? ? ? // 調(diào)取公共減法
? ? ? ? // eslint-disable-next-line no-undef
? ? ? ? variables1 = Subtraction.subtraction(variables1, variables2)
? ? ? ? break
? ? ? // eslint-disable-next-line no-duplicate-case
? ? ? case '*':
? ? ? ? // 調(diào)取公共乘法
? ? ? ? // 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) // 顯示當(dāng)前的值
? ? return addOne
? }
}

multiplication.js：乘法操作

export default {
? multiplication: function (addOne, addTwo) {
? ? // eslint-disable-next-line no-unused-vars
? ? addOne = Number(addOne) * Number(addTwo) // 顯示當(dāng)前的值
? ? return addOne
? }
}

subtraction.js：減法操作

export default {
? subtraction: function (addOne, addTwo) {
? ? // eslint-disable-next-line no-unused-vars
? ? addOne = Number(addOne) - Number(addTwo) // 顯示當(dāng)前的值
? ? return addOne
? }
}

總結(jié)：

我們對于加減同一級別的代碼可以自己添加一個js文件，然后retrieval.js里面寫進(jìn)入即可，當(dāng)然我們最好將這個js文件換成xml就可以實現(xiàn)仿反射+配置文件了，對于乘除法我們需要進(jìn)一步更改計算器為每次都是兩個計算，不可以一次性輸入很多數(shù)字，這樣可以避免開優(yōu)先級問題，當(dāng)然我們要做成優(yōu)先級是我們很重要的學(xué)習(xí)理論依據(jù)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: