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

• demo源码链接（父组件：App，子组件：calculator）

• 点击需要写入的表格

• 弹出组件

• 计算赋值

• 实现

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
                }
            }  
        })
    }
}
},