vue 金额组件,输入提示单位:‘千’、‘万’、‘十万’...并用‘,’三个格式化

近期项目中遇到一个需求,金额输入框,输入过程中自动提示‘千’、‘万’、‘十万’、‘百万’......等单位提示,鼠标失去焦点后,并用‘,’三位隔开计数。

例如:

输入:12345.99

失去焦点:12,345.99

放一张图展示下效果吧

直接贴代码吧

封装的组件inputCurrency.vue

<template><el-tooltip :manual="manual" popper-class="elInputCurrency" v-model="tooltipModel"class="elInputCurrency" effect="light" :content="numberDigit" placement="top-start"><el-inputv-if="!readonly || readOnlyBorder"placeholder="请输入":disabled="disabled":readonly="readonly"v-show="show"@blur="blur"@focus="focus"@input="inputCurrency":value="innerVal"></el-input><span v-else>{{innerVal}} 元</span></el-tooltip>
</template>
<script>
export default {name: 'InputCurrency',props: {value: {type: [Number, String],},disabled: {type: Boolean,default: false,},readonly: {type: Boolean,default: false,},show: {type: Boolean,default: true},readOnlyBorder: {type: Boolean,default: false}},data() {return {manual: true,tooltipModel: false,numberDigit: '',innerVal: ''}},computed: {},watch: {value(n) {if (this.readonly) {this.inputCurrency(this.value);}}},mounted() {this.innerVal = this.formatterNumber(this.value);if (this.readonly) {this.inputCurrency(this.innerVal);}},methods: {inputCurrency(value) {const self = this;value = value.toString();value = value.replace(/[^0-9.]/g, '');value = value.replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3');const data = parseInt(value).toString();const moneyText = ['千', '万', '十万', '百万', '千万', '亿', '十亿', '百亿', '千亿', '万亿'];const maxValue = 14;if (data.length > 3 && data.length < maxValue) {self.tooltipModel = this.readonly ? false : true;self.manual = false;self.numberDigit = moneyText[data.length - 4];} else if (data.length > maxValue - 1) {value = self.value;self.numberDigit = moneyText[moneyText.length - 1];} else {self.manual = true;self.tooltipModel = false;self.numberDigit = '';}let val = (value && value.split("")) || [];this.innerVal = val.join("").match(/^\d*(\.?\d{0,2})/g)[0] || '';// this.innerVal = this.formatterNumber(this.innerVal);if (!this.readonly) {self.$emit('change', this.innerVal);}},inputChange(value) {let inputValue = this.value;inputValue = Number(value).toFixed(2).toString();this.innerVal = this.formatterNumber(inputValue);this.$emit('change', inputValue);},blur() {this.inputChange(this.value.toString());this.$emit('blur');},focus() {this.innerVal = this.formatterNumber(this.value);if (typeof (this.innerVal) === 'number') {this.innerVal = this.innerVal.toString();}this.$emit('change', this.value);this.$emit('focus');},formatterNumber(cellValue) {const val = parseFloat(cellValue).toFixed(2).toString().split('').reverse().join('').replace(/(\d{3})/g, '$1,').replace(/\,$/, '').split('').reverse().join('');return val;}},
}
</script>
<style scoped>
.el-input.el-input-group {display: inline-table !important;
}.el-input.el-input-group /deep/ .el-input-group__append {background-color: transparent;color: #303133;
}.el-input /deep/ .el-input__inner {border: 1px solid #dcdfe6 !important;
}.el-input:before {content: '元';position: absolute;right: 8px;top: 50%;transform: translateY(-50%);color: #303133;
}.el-input /deep/ input {padding-right: 0px;
}.el-input /deep/ .el-input__suffix {margin: 1px 17px auto 0;
}.el-input /deep/ .el-input__icon {line-height: 29px;
}span.elInputCurrency {line-height: 30px;color: #112B50;font-size: 14px;font-family: 微软雅黑;
}
</style>
<style>
.elInputCurrency.el-tooltip__popper.is-light {background-color: #fff;color: #505960;border: 1px solid #d5d9dc;box-shadow: 0 0 8px 0 #000000;width: 40px;height: 32px;text-align: center;line-height: 32px;padding: 0px;
}.elInputCurrency.el-tooltip__popper.is-light .popper__arrow {left: 39% !important;margin-left: -6px;border-top-color: #D5D9DC !important;
}.elInputCurrency.el-tooltip__popper.is-light .popper__arrow::after {border-top-color: #fff;
}
</style>

组件使用

<template><div style="width: 300px"><span>金额:</span><input-currency style="display: inline-block;width: 200px;" class="detail-value-width" :value="value":disabled="disabledFlag"@change="onchange" :readonly="readFlag" :show="showFlag"></input-currency></div>
</template><script>
import inputCurrency from "@/components/inputCurrency";export default {name: "demoForCurrency",components: {inputCurrency},data() {return {value: '12345.99',disabledFlag: false,readFlag: false,showFlag: true}},methods: {onchange(value) {this.value = value;}}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/323503.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

私域流量优化:如何利用 AIPL 模型洞察客户生命周期价值

在当今这个数字化时代&#xff0c;商业战场的硝烟从未如此浓烈。随着互联网红利的逐渐消退&#xff0c;公域流量的成本水涨船高&#xff0c;企业间对于有限用户资源的争夺已进入白热化阶段。每一次点击、每一个曝光背后&#xff0c;都是企业不得不承担的高昂代价。在此背景下&a…

JavaScript 进阶征途:解锁Function奥秘,深掘Object方法精髓

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;JavaScript 精粹 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 &#x1f235;Function方法 与 函数式编程&#x1f49d;1 call &#x1f49d…

【MySQL数据库】丨一文详解 JdbcTemplate(Spring中的CRUD)

前言 JdbcTemplate 是 Spring框架 中提供的一个对象&#xff0c;用于简化JDBC操作。它使得数据库操作变得更为简单和方便&#xff0c;大大提高了开发效率。 文章目录 前言为何要使用JdbcTemplate在JdbcTemplate中执行SQL语句的方法大致分为3类&#xff1a;案例代码 JdbcTemplat…

whisper之初步使用记录

文章目录 前言 一、whisper是什么&#xff1f; 二、使用步骤 1.安装 2.python调用 3.识别效果评估 4.一点封装 5.参考链接 总结 前言 随着AI大模型的不断发展&#xff0c;语音识别等周边内容也再次引发关注&#xff0c;通过语音转文字再与大模型交互&#xff0c;从而…

驾驶证OCR识别接口如何对接

驾驶证OCR识别接口也叫驾驶证文字识别OCR接口&#xff0c;指的是传入驾驶证照片&#xff0c;精准识别静态驾驶证图像上的文字信息。那么驾驶证OCR文字识别接口如何对接呢&#xff1f; 首先我们找到一家有驾驶证OCR识别接口的服务商&#xff0c;数脉API,然后注册账户&#xff0…

Celery + redis 异步分布式任务队列安装测试

Celery 异步分布式任务队列 Celery 5.4.0 官方文档 环境&#xff1a;3台 centos7.9 普通用户 redisSchedulerworkerdp951dp96111dp971 文章目录 Celery 异步分布式任务队列1、Celery 介绍2、安装部署2.1 安装消息中间件&#xff08;broker&#xff09;2.2 安装Celery 3、功能…

骑出好身材,女士专属,这项运动让你健康美丽两不误。

在繁忙的生活节奏中&#xff0c;寻找一项既能放松心情又能塑形美体的运动&#xff0c;成为了现代女性的新追求。骑行&#xff0c;这项绿色低碳的运动方式&#xff0c;正以其独特的魅力&#xff0c;成为女士们的新宠。它不仅能够带你穿梭于城市的喧嚣与自然的宁静之间&#xff0…

C++面向对象程序设计 - 虚函数

在C中&#xff0c;虑函数&#xff08;Virtual Function&#xff09;是面向对象编程&#xff08;OOP&#xff09;中的一个重要概念&#xff0c;它允许派生类&#xff08;或称为子类&#xff09;覆盖基类&#xff08;或称为父类&#xff09;中的成员函数。当通过基类指针或引用调…

遥控挖掘机之ESP8266调试心得(1)

ESP8266调试心得 1. 前言2.遇到的问题2.1 ESP8266模块建立TCP连接时候报错2.2 指令异常问题 3. 更新ESP8266固件3. ESP8266的部分AT指令3. 连接步骤3.1 模块与电脑连接3.2.1 电脑上的设置3.2.2 ESP8266模块作为客户机&#xff08;TCP Cilent&#xff09;的设置步骤 3.2 模块与模…

电脑硬盘故障,这5种情况要了解!

在数字化时代&#xff0c;电脑硬盘作为存储数据的重要设备&#xff0c;其稳定性和安全性直接关系到用户的数据安全和工作效率。然而&#xff0c;硬盘故障却是一个无法完全避免的问题。为什么会出现电脑硬盘故障&#xff1f;出现该问题时应该如何解决&#xff1f;一文带你弄懂答…

k8s部署最新版zookeeper集群(3.9.2),并配置prometheus监控

目录 zookeeper集群部署创建zookeeper文件夹namespace.yamlscripts-configmap.yamlserviceaccount.yamlstatefulset.yamlsvc-headless.yamlsvc.yamlmetrics-svc.yaml执行部署 接入prometheus访问prometheus查看接入情况导入zookeeper监控模版监控展示 zookeeper集群部署 复制粘…

Linux 操作系统TCP、UDP

1、TCP服务器编写流程 头文件&#xff1a; #include <sys/socket.h> 1.1 创建套接字 函数原型&#xff1a; int socket(int domain, int type, int protocol); 参数&#xff1a; domain: 网域 AF_INET &#xff1a; IPv4 AF_INET6 &a…

第十五届蓝桥杯省赛大学B组(c++)

很幸运拿了辽宁赛区的省一,进入6月1号的国赛啦... 这篇文章主要对第十五届省赛大学B组(C)进行一次完整的复盘,这次省赛2道填空题6道编程题: A.握手问题 把握手情景看成矩阵: 粉色部分是7个不能互相捂手的情况 由于每个人只能和其他人捂手, 所以黑色情况是不算的 1和2握手2和…

Vue+OpenLayers7入门到实战:OpenLayers解析通过fetch请求的GeoJson格式数据,并叠加要素文字标注,以行政区划边界为例

返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7入门到实战 前言 本章介绍如何使用OpenLayers7在地图上通过fetch请求geojson数据,然后通过OpenLayers解析为Feature要素叠加到图层上,并且通过动态设置标注方式显示要素属性为文字标注。 本章还是以行政区划边界为例,这个…

大模型LLM之SFT微调总结

一. SFT微调是什么 在大模型的加持下现有的语义理解系统的效果有一个质的飞跃&#xff1b;相对于之前的有监督的Pre-Train模型&#xff1b;大模型在某些特定的任务中碾压式的超过传统nlp效果&#xff1b;由于常见的大模型参数量巨大&#xff1b;在实际工作中很难直接对大模型训…

游戏陪玩平台app小程序H5源码交付游戏陪玩接单软件游戏陪玩源码 陪玩小程序陪玩工作室运营模式陪玩管理系统游戏陪玩工作室怎么做

提供陪玩平台源码&#xff0c;陪玩系统源码&#xff0c;陪玩app源码&#xff0c;团队各部门配备齐全&#xff0c;分工明确&#xff0c;及时对接开发进度&#xff0c;保证开发效率 一、陪玩平台源码的功能介绍 1、派单大厅:陪玩系统源码的派单大厅内支持用户通过语音连麦的方式…

Vue.js-----vue组件

能够说出vue生命周期能够掌握axios的使用能够了解$refs, $nextTick作用能够完成购物车案例 Vue 生命周期讲解 1.钩子函数 目标&#xff1a;Vue 框架内置函数&#xff0c;随着组件的生命周期阶段&#xff0c;自动执行 作用: 特定的时间点&#xff0c;执行特定的操作场景: 组…

硬性清空缓存的方法

前端发布代码后&#xff0c;我们是需要刷新页面再验证的。有时候仅仅f5 或者ctrlshiftdelete快捷键仍然有历史缓存&#xff0c;这时可以通过下面的方法硬性清空缓存。 以谷歌浏览器为例&#xff0c;打开f12&#xff0c;右键点击刷新按钮&#xff0c;选择【清空缓存并硬性加载】…

Windows只能安装在GPT磁盘上

转换磁盘分区形式 步骤1. 先按照正常流程使用Windows系统安装光盘或系统U盘引导计算机。 步骤2. 在Windows安装程序中点击“开始安装”&#xff0c;然后按ShiftF10打开命令提示符。 步骤3. 依次输入以下命令&#xff0c;并在每一行命令后按一次Enter键执行。 步骤4. 等待转换…

C++ | Leetcode C++题解之第78题子集

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> t;vector<vector<int>> ans;void dfs(int cur, vector<int>& nums) {if (cur nums.size()) {ans.push_back(t);return;}t.push_back(nums[cur]);dfs(cur 1, nums);t.po…