H5实现计算器组件（Vue组件）

之前做H5页面的时候就碰到过这样的需求，一个盘点系统，车间希望要直接使用计算器，最好能直接调用还能准确赋值，APP调用原生的计算器恐怕都很难实现，要想做到也只有自己封装，今天把它又完善了一下，加入了：1、等式连续运算 2、单个组件化 3、显示运算公式和提示等功能

demo源码链接（父组件：App，子组件：calculator）
点击需要写入的表格

823.png

弹出组件

下面运算式，上面结果，超过3值个运算弹出提示。输入，删除，清空实时赋值。

644.png

计算赋值

确认后通过数据id准确赋值，没有计算公式则加入输入值，取消或者其他方式关闭则无动作。

751.png

实现

watch属性触发，将等式字符串切成operatorArr 和resultDisplayArr 两个数组, 然后使用reduce属性连续处理等式，得到结果

watch: {
resultDisplay() {
    let resultDisplayArr = this.resultDisplay.replace(/÷/g,"+").replace(/-/g,"+").replace(/x/g,"+")
    resultDisplayArr = resultDisplayArr.split('+') // 截出等式数字数组
    if (resultDisplayArr.length) {
        this.resultStatus = resultDisplayArr.length
    }    
    let operatorArr = []
    // 截出等式运算符数组
    let lastResultDisplay = this.resultDisplay.substr( this.resultDisplay.length-1, 1)
    if (lastResultDisplay==='+' || lastResultDisplay==='-' 
            || lastResultDisplay==='x' || lastResultDisplay==='÷') {
        return
    }
    for(let i of this.resultDisplay){
        if (i==='+' || i==='-' || i==='x' || i==='÷') {
            operatorArr.push(i)
        }
    }
    if (resultDisplayArr.length > 2) {
        this.promptInfoShow = true
    } else {
        this.promptInfoShow = false
    }
    if (resultDisplayArr.length > 1) {
        this.resultInput = resultDisplayArr.reduce((acc,cur,inx,src) => {
            let valueA = null // 首项
            let valueB = null // 次项
            // 上次计算的数
            if (acc) {
                valueA = Number(acc)
            } else {
                valueA = Number(resultDisplayArr[inx-1])
            }                        
            valueB = Number(resultDisplayArr[inx])
            // 计算它
            if (operatorArr.length > 0 && valueB) {
                if (operatorArr[inx-1] === '+') {
                    acc = valueA + valueB
                    return acc
                }else if (operatorArr[inx-1] === '-') {
                    acc = valueA - valueB
                    return acc
                }else if (operatorArr[inx-1] === 'x') {
                    acc = valueA * valueB
                    return acc
                }else if (operatorArr[inx-1] === '÷') {
                    acc = valueA / valueB
                    return acc
                }
            }  
        })
    }
}
},

最后编辑于：2020.08.03 20:16:15