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

说在前面

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

体验地址

jyeontu.xyz/jvuewheel/#...

代码实现

输入框聚焦

javascript 复制代码
@focus="isinputFocus = true"

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

输入框失焦

javascript 复制代码
inputBlur() {
    setTimeout(() => {
        this.isinputFocus = false;
    }, 200);
}

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

输入框输入

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

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

计算算式结果

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

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

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

组件库

组件文档

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

组件内容

组件库中还有许多好玩有趣的组件,如:

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

等等......

组件库源码

组件库已开源到gitee,有兴趣的也可以到这里看看:gitee.com/zheng_yongt...

🌟觉得有帮助的可以点个star~
🖊有什么问题或错误可以指出,欢迎pr~
📬有什么想要实现的组件或想法可以联系我~

公众号

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

说在后面

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

相关推荐
小小小小宇16 分钟前
虚拟列表兼容老DOM操作
前端
悦悦子a啊18 分钟前
Python之--基本知识
开发语言·前端·python
安全系统学习1 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖2 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖2 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐2 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台3 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121383 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css