- 作者:老汪软件技巧
- 发表时间:2024-10-03 17:01
- 浏览量:
说在前面
最近在做一个统计表单录入功能,每一个表单项都需要自己先计算好总数再录入,这样操作显得有些繁琐,所以就想着可不可以将计算过程也集成到输入框里,这样我们可以直接输入算式,然后由输入框来完成计算,最后直接得出结果,于是就封装了一个可以自动计算算式的输入框组件。
体验地址
代码实现输入框聚焦
@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~
有什么想要实现的组件或想法可以联系我~
公众号