当前位置: 首页 > news >正文

el-input实现金额输入

需求:想要实现一个输入金额的el-input,限制只能输入数字和一个小数点。失焦数字转千分位,聚焦转为数字,超过最大值,红字提示

效果图

失焦

效果图

聚焦

聚焦

报错效果

报错

// 组件limitDialog
<template><el-dialog:visible.sync="isVisible"title="修改限额"width="420px":before-close="cancel"><el-form :model="formVal" ref="ruleForm" size="small"><el-form-itemlabel="单次交易限额"prop="single_limit":rules="[{required: true,message: '请输入单次交易限额',trigger: 'change',},{ validator: singleRule, trigger: 'change' },]"><el-inputv-model="formVal.single_limit"v-thousandmaxlength="10"type="text"@keypress.native="restrictInput('single_limit', $event)"@blur="formatOnBlur('single_limit', $event)"><template slot="suffix">{{ otherInfo.currency }}</template></el-input></el-form-item><el-form-itemlabel="每日限额"prop="daily_limit":rules="[{required: true,message: '请输入每日限额',trigger: 'change',},{ validator: dailyRule, trigger: 'change' },]"><el-inputv-model="formVal.daily_limit"maxlength="10"v-thousandtype="text"@keypress.native="restrictInput('daily_limit', $event)"@blur="formatOnBlur('daily_limit', $event)"><template slot="suffix">{{ otherInfo.currency }}</template></el-input><p class="tip" v-if="type !== 'bath'">当日已用金额 {{ otherInfo.daily_used }}{{ otherInfo.currency }}</p></el-form-item><el-form-itemlabel="每月限额"prop="monthly_limit":rules="[{required: true,message: '请输入每月限额',trigger: 'change',},{ validator: monthlyRule, trigger: 'change' },]"><el-inputv-model="formVal.monthly_limit"maxlength="10"v-thousandtype="text"@keypress.native="restrictInput('monthly_limit', $event)"@blur="formatOnBlur('monthly_limit', $event)"><template slot="suffix">{{ otherInfo.currency }}</template></el-input><p class="tip" v-if="type !== 'bath'">当月已用金额 {{ otherInfo.monthly_used }}{{ otherInfo.currency }}</p></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="cancel" size="small">取 消</el-button><el-buttontype="primary"@click="handleSave"size="small":loading="isSumbitLoading">确 定</el-button></div></el-dialog>
</template><script>
import { updateCardLimitApi } from "@/services/api/cardManage.js";
import { updateObject } from "@/utils/common";
export default {data() {return {isVisible: false,isSumbitLoading: false,formVal: {single_limit: "",daily_limit: "",monthly_limit: "",id: "",},otherInfo: {currency: "USD",daily_used: "",monthly_used: "",},type: "bath",};},props: {selectedList: {type: Array,default: () => [],},},methods: {singleRule(rule, value, callback) {const numValue = Number(value);if (numValue > 10000) {callback(new Error(`输入金额不可超过单次限额(10,000.00 ${this.otherInfo.currency})`));}this.checkLimit(value, callback);},dailyRule(rule, value, callback) {const numValue = Number(value);if (numValue > 100000) {callback(new Error(`输入金额不可超过每日限额(100,000.00 ${this.otherInfo.currency})`));}this.checkLimit(value, callback);},monthlyRule(rule, value, callback) {const numValue = Number(value);if (numValue > 500000) {callback(new Error(`输入金额不可超过每月限额(500,000.00 ${this.otherInfo.currency})`));}this.checkLimit(value, callback);},checkLimit(value, callback) {const strValue = String(value || "");if (strValue === "")return callback(new Error("请输入单次交易限额"));if (strValue.endsWith("."))return callback(new Error("不能以小数点结尾"));const numValue = Number(strValue);if (isNaN(numValue)) return callback(new Error("请输入有效的数字"));if (strValue.includes(".") && strValue.split(".")[1].length > 2) {return callback(new Error("小数点后最多两位"));}callback();},restrictInput(formKey, event) {const key = event.key;const value = String(this.formVal[formKey] || "");if (event.ctrlKey || event.altKey || key.length > 1) return;// 只允许数字和小数点,限制多个小数点const isValidKey = /[0-9.]/.test(key);const hasDecimal = value.includes(".");if (!isValidKey || (key === "." && hasDecimal)) {event.preventDefault();return;}},formatOnBlur(formKey) {const strValue = String(this.formVal[formKey] || "");if (strValue && !isNaN(Number(strValue))) {this.formVal[formKey] = Number(strValue).toFixed(2);}},init(info, type) {this.isVisible = true;this.type = type;updateObject(this.formVal, info);updateObject(this.otherInfo, info);},handleSave() {this.isSubmitLoading = true;this.$refs.ruleForm.validate(async (valid) => {if (valid) {const { code } = await updateCardLimitApi({...this.formVal,id:this.type === "bath"? this.selectedList.map((item) => item.id): [this.formVal.id],});if (code == 0) {this.$message.success("修改成功");this.cancel();this.$emit("reload");}}this.isSumbitLoading = false;});},cancel() {this.isVisible = false;this.$refs.ruleForm.resetFields();updateObject(this.formVal, {single_limit: "",daily_limit: "",monthly_limit: "",id: "",});this.otherInfo.currency = "USD";},},
};
</script><style lang="scss" scoped>
.dialog-footer {text-align: right;
}
.tip {color: #999999;font-size: 12px;
}
</style>

相关文章:

el-input实现金额输入

需求&#xff1a;想要实现一个输入金额的el-input&#xff0c;限制只能输入数字和一个小数点。失焦数字转千分位&#xff0c;聚焦转为数字&#xff0c;超过最大值&#xff0c;红字提示 效果图 失焦 聚焦 报错效果 // 组件limitDialog <template><el-dialog:visible.s…...

C++11智能指针

一、指针管理的困境 资源释放了&#xff0c;但指针没有置空&#xff08;野指针、指针悬挂、踩内存&#xff09; 没有释放资源&#xff0c;产生内存泄漏问题&#xff1b;重复释放资源&#xff0c;引发coredump 二、智能指针...

安装Git(小白也会装)

一、官网下载&#xff1a;Git 1.依次点击&#xff08;红框&#xff09; 不要安装在C盘了&#xff0c;要炸了&#xff01;&#xff01;&#xff01; 后面都 使用默认就好了&#xff0c;不用改&#xff0c;直接Next&#xff01; 直到这里&#xff0c;选第一个 这两种选项的区别如…...

驭势科技9周年:怀揣理想,踏浪前行

2025年的2月&#xff0c;驭势科技迎来9岁生日。位于国内外不同工作地的Uiseeker齐聚线上线下&#xff0c;共同庆祝驭势走过的璀璨九年。 驭势科技联合创始人、董事长兼CEO吴甘沙现场分享了驭势9年的奔赴之路&#xff0c;每一段故事都包含着坚持与拼搏。 左右滑动查看更多 Part.…...

一款在手机上制作电子表格

今天给大家分享一款在手机上制作电子表格的&#xff0c;免费好用的Exce1表格软件&#xff0c;让工作变得更加简单。 1 软件介绍 Exce1是一款手机制作表格的办公软件&#xff0c;您可以使用手机exce1在线制作表格、工资表、编辑xlsx和xls表格文件等&#xff0c;还可以学习使用…...

Python解决“比赛配对”问题

Python解决“比赛配对”问题 问题描述测试样例解决思路代码 问题描述 小R正在组织一个比赛&#xff0c;比赛中有 n 支队伍参赛。比赛遵循以下独特的赛制&#xff1a; 如果当前队伍数为 偶数&#xff0c;那么每支队伍都会与另一支队伍配对。总共进行 n / 2 场比赛&#xff0c;…...

【AI论文】RAD: 通过大规模基于3D图形仿真器的强化学习训练端到端驾驶策略

摘要&#xff1a;现有的端到端自动驾驶&#xff08;AD&#xff09;算法通常遵循模仿学习&#xff08;IL&#xff09;范式&#xff0c;但面临着因果混淆和开环差距等挑战。在本研究中&#xff0c;我们建立了一种基于3D图形仿真器&#xff08;3DGS&#xff09;的闭环强化学习&…...

Web开发:ORM框架之使用Freesql的导航属性

一、什么时候用导航属性 看数据库表的对应关系&#xff0c;一对多的时候用比较好&#xff0c;不用多写一个联表实体&#xff0c;而且查询高效 二、为实体配置导航属性 1.给关系是一的父表实体加上&#xff1a; [FreeSql.DataAnnotations.Navigate(nameof(子表.子表关联字段))]…...

【docker】namespace底层机制

Linux 的 Namespace 机制是实现容器化&#xff08;如 Docker、LXC 等&#xff09;的核心技术之一&#xff0c;它通过隔离系统资源&#xff08;如进程、网络、文件系统等&#xff09;为进程提供独立的运行环境。其底层机制涉及内核数据结构、系统调用和进程管理。以下是其核心实…...

【每天认识一个漏洞】url重定向

&#x1f31d;博客主页&#xff1a;菜鸟小羊 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 常见应用场景 主要是业务逻辑中需要进行跳转的地方。比如登录处、注册处、访问用户信息、订单信息、加入购物车、分享、收…...

端口映射/内网穿透方式及问题解决:warning: remote port forwarding failed for listen port

文章目录 需求&#xff1a;A机器是内网机器&#xff0c;B机器是公网服务器&#xff0c;想要从公网&#xff0c;访问A机器的端口方式&#xff1a;端口映射&#xff0c;内网穿透&#xff0c;使用ssh打洞端口&#xff1a;遇到问题&#xff1a;命令执行成功&#xff0c;但是端口转发…...

Polardb开发者大会

这是第二次参加这个大会 还有不少老朋友 好多年没有这种经历了–大会讲的我不是很懂 10几年前参会&#xff0c;那时候自己不懂。后来就慢慢懂了。这些年参会都虽然还在不断学习&#xff0c;但是没觉得自己差距很大了。 这次出来很不一样&#xff0c;一堆新的技能&#xff0c;这…...

从二维随机变量到多维随机变量

二维随机变量 设 X X X和 Y Y Y是定义在同一样本空间 Ω \varOmega Ω上的两个随机变量&#xff0c;称由它们组成的向量 ( X , Y ) (X, Y) (X,Y)为二维随机变量&#xff0c;亦称为二维随机向量&#xff0c;其中称 X X X和 Y Y Y是二维随机变量的分量。 采用多个随机变量去描述…...

Vulnhub靶场 Kioptrix: Level 1.3 (#4) 练习

目录 0x00 环境准备0x01 主机信息收集0x02 站点信息收集0x03 漏洞查找与利用0x04 总结 0x00 环境准备 下载&#xff1a;https://download.vulnhub.com/kioptrix/Kioptrix4_vmware.rar 解压后得到的是vmdk文件。在vm中新建虚拟机&#xff0c;稍后安装操作系统&#xff0c;系统选…...

权重生成图像

简介 前面提到的许多生成模型都有保存了生成器的权重,本章主要介绍如何使用训练好的权重文件通过生成器生成图像。 但是如何使用权重生成图像呢? 一、参数配置 ima_size 为图像尺寸,这个需要跟你模型训练的时候resize的时候一样。 latent_dim为噪声维度,一般的设置都是…...

实时时钟(RTC)/日历芯片PCF8563的I2C读写驱动(2):功能介绍

0 参考资料 PCF8563数据手册&#xff08;第 11 版——2015 年 10 月 26 日&#xff09;.pdf 1 功能介绍 1.1 实时时钟&#xff08;RTC&#xff09;/日历 &#xff08;1&#xff09;PCF8563支持实时时钟&#xff08;RTC&#xff09;&#xff0c;提供时、分、秒信息。对应寄存器…...

猿大师播放器:HTML内嵌VLC播放RTSP视频流,无需转码,300ms级延迟,碾压服务器转码方案

在智慧城市、工业安全、应急指挥等关键领域&#xff0c;实时视频监控已成为守护生命与财产的核心防线‌。然而&#xff0c;行业普遍面临三大矛盾&#xff1a; ‌实时性要求与高延迟矛盾‌&#xff1a;火灾蔓延速度达1米/秒&#xff0c;化工泄漏扩散仅需数秒&#xff0c;传统方…...

牛客刷题自留-深度学习

1、当在卷积神经网络中加入池化层(pooling layer)时&#xff0c;平移变换的不变性会被保留&#xff0c;是吗&#xff1f; 正常答案: C A 不知道 B 看情况 C 是 D 否 平移变换不变性的概念 平移变换不变性指的是当输入图像发生小范围的平移时&#xff0c;模型的输出结果不会发…...

AI 时代下,操作系统如何进化与重构?

AI 时代下&#xff0c;操作系统如何进化与重构&#xff1f; AI时代服务器操作系统技术挑战2024 龙蜥操作系统大会最关注的是哪些议题分享与讨论&#xff1f;对于操作系统未来的发展趋势&#xff0c;有哪些观察和建议 2024 龙蜥操作系统大会&#xff08;OpenAnolis Conference&a…...

Hadoop最新版本hadoop-3.4.1搭建伪分布式集群以及相关报错解决

一&#xff1a;概述 Hadoop 是一个开源的分布式计算框架&#xff0c;广泛应用于大数据处理。伪分布式集群是 Hadoop 的一种部署模式&#xff0c;它可以在单台机器上模拟集群环境&#xff0c;适合初学者进行学习和实验。本文将详细介绍如何在单台机器上搭建 Hadoop 3.4.1 的伪分…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...