当前位置: 首页 > 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 的伪分…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

【Linux系统】Linux环境变量:系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...