说在前面

最近在做一个统计表单录入功能，每一个表单项都需要自己先计算好总数再录入，这样操作显得有些繁琐，所以就想着可不可以将计算过程也集成到输入框里，这样我们可以直接输入算式，然后由输入框来完成计算，最后直接得出结果，于是就封装了一个可以自动计算算式的输入框组件。

体验地址

代码实现输入框聚焦

@focus="isinputFocus = true"

输入框聚焦的时候将isinputFocus置为true，以显示计算结果。

输入框失焦

inputBlur() {
    setTimeout(() => {
        this.isinputFocus = false;
    }, 200);
}

当输入框失去焦点时，使用setTimeout延迟200毫秒将isinputFocus设置为false，延时主要是为了保证点击输入结果后可以触发点击事件。

输入框输入

handleInput() {
    const sum = this.doCalc();
    if (!sum) {
        this.calcRes = "";
        return;
    }
    this.calcRes = sum;
    this.$emit("input", this.inputVal);
}

监听输入框的input事件，调用doCalc方法计算表达式的结果，如果结果有效，则更新calcRes，并通过$emit触发input事件，将当前的输入值inputVal传递给父组件。

计算算式结果

doCalc() {
    if (!/[0-9\+\-\*\/\(\*\)]/.test(this.inputVal)) {
        return "";
    }
    try {
        const sum = eval(this.inputVal);
        return sum;
    } catch (error) {
        return "";
    }
}

首先检查inputVal是否只包含有效的数学表达式字符，然后使用eval函数计算表达式的值。如果计算出错，则捕获异常并返回空字符串。

这里计算算式的方式有多种，我选择了比较简单的直接实用eval函数来进行计算，可能会存在一些风险，大家也可以换成自己喜欢的方式来计算，比如使用栈来模拟算式计算过程进行计算，这个后面有时间可以写一篇文章再展开说下。

组件库组件文档

目前该组件也已经收录到我的组件库中，组件文档地址如下：

组件内容

组件库中还有许多好玩有趣的组件，如：

等等……

组件库源码

组件库已开源到gitee，有兴趣的也可以到这里看看：/zheng_yongt…

觉得有帮助的可以点个star~

有什么问题或错误可以指出，欢迎pr~

有什么想要实现的组件或想法可以联系我~

公众号