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

说在前面

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

体验地址

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

相关推荐
wordbaby15 分钟前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹20 分钟前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel27 分钟前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh41 分钟前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的1 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人1 小时前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
老华带你飞1 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
xw51 小时前
移动端调试上篇
前端
伍哥的传说1 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入