封装一个自动计算输入框组件

说在前面

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

体验地址

http://jyeontu.xyz/jvuewheel/#/JAutoCalcInputView

代码实现

输入框聚焦

@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函数来进行计算，可能会存在一些风险，大家也可以换成自己喜欢的方式来计算，比如使用栈来模拟算式计算过程进行计算，这个后面有时间可以写一篇文章再展开说下。

组件库

组件文档

目前该组件也已经收录到我的组件库中，组件文档地址如下：
http://jyeontu.xyz/jvuewheel/#/JAutoCalcInputView

组件内容

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

• 悬浮按钮
• 评论组件
• 词云
• 瀑布流照片容器
• 视频动态封面
• 3D轮播图
• web桌宠
• 贡献度面板
• 拖拽上传
• 自动补全输入框
• 图片滑块验证

等等……

组件库源码

组件库已开源到gitee，有兴趣的也可以到这里看看：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse

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

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

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

公众号

关注公众号『前端也能这么有趣』，获取更多有趣内容。

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。