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

金额千位符自定义指令

自定义指令文件

moneyFormat.js

 /*** v-money 金额千分位转换*/export default {inserted: inputFormatter({// 格式化函数formatter(num, util) {if(num == null || num == '' || num == 'undefined' || typeof(num) == 'undefined'){return ''}if(util == '万元' || util == '万'){return formatMoney(num,'wan');}else if(util == '元'){return formatMoney(num);}// num = num.toString()// let num1 = num.split(".")[0], num2 = num.split(".")[1];// let c = num1.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');// return num.toString().indexOf(".") !== -1 ? c + "." + num2 : c;},// 解析函数parser(val) {val = val.toString().replace(/,/g, "")console.log(val,'val')return parseFloat(val) //.replace(/0+$/,"");},isNumber: true})
}/*** 监听输入框 数值千位符* @param {*} param0 * @returns */
function inputFormatter({ formatter = (e) => e, parser = (e) => e, limit = (e) => e, watchInput = true, isNumber = false }){return (el, binding, vnode) => {console.log(vnode.elm.innerText,'vnode.elm.innerText')if(vnode.elm.innerText != '元' && vnode.elm.innerText != '万元' && vnode.elm.innerText != '万'){return}let watchVal = trueconst input = el.getElementsByClassName("el-input__inner")[0] //$(el).find(".el-input__inner")[0]// 获取记录光标位置let selectionSitelet getSelectionSite = (event) => {let oldVal = event.target.value || ''let selectionStart = event.target.selectionStartselectionSite = oldVal.length - selectionStart}// 点击、键盘事件更新光标位置el.addEventListener("click", getSelectionSite)el.addEventListener("keyup", getSelectionSite)//为input绑定值赋值const assignment = (val) => {vnode.componentInstance.$emit('input', parser(val))}// 更改显示的值const upShow = (val) => {console.log(val,'valvalval')vnode.context.$nextTick(() => {input.value = val})}// 监听绑定值变化vnode.componentInstance.$watch('value', val => {if (watchVal) { upShow(formatter(val, vnode.elm.innerText)) }}, { deep: true, immediate: true })// 数字格式化let toNumber = (val) => {val = val.toString().replace(/[^\d^\.^\-]+/g, "") // 第二步:把不是数字,不是小数点、-的过滤掉.replace(/^0+(\d)/, "$1") // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字.replace(/^\./, "0.") // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".") // 只保留第一个".", 清除多余的"."// .match(/^\d*(\.?\d{0,9})/g)[0] || ""; // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有1到9位小数return val}// 处理最后一位非法字符const handlerIllegalStr = (str) => {while (!(/^[0-9]+.?[0-9]*/.test(str.charAt(str.length - 1))) && str) {str = str.substr(0, str.length - 1)}return str || ''}// 监听input事件,可添加操作el.addEventListener("input", (event) => {let selectionStart = input.selectionStartlet val = event.target.valueif (binding.modifiers.number || isNumber) {val = toNumber(val)}let inp = limit(val)console.log(inp,'inp')event.target.value = inp// if (binding.modifiers.watchInput || watchInput) {//     assignment(inp)//     upShow(formatter(parser(val)))// }// setTimeout(() => {//     if (selectionSite && input.value.length != selectionStart) {//         input.selectionStart = input.selectionEnd = input.value.length - selectionSite//     }// }, 0)})if (input) {// 失去焦点input.addEventListener("blur", (event) => {watchVal = truelet val = event.target.value;console.log(val,'失去焦点111')if(val == null || val == '' || val == 'undefined' || typeof(val) == 'undefined'){return ''}if (binding.modifiers.number || isNumber) {val = handlerIllegalStr(val)}// assignment(val)upShow(formatter(val, vnode.elm.innerText)) console.log(val,'失去焦点22')})// 获取焦点input.addEventListener("focus", (event) => {watchVal = falselet val = event.target.value;if(val == null || val == '' || val == 'undefined' || typeof(val) == 'undefined'){return ''}// val = delcommafy(val);// assignment(val)upShow(parser(val))console.log(parser(val),'获取焦点')})}}
} //去除千分位中的‘,’
function delcommafy(num){if (num) {num = num.toString()num = num.replace(/,/gi, '')num = num.replace(/[ ]/g, '') //去除空格return num}return num 
}/*** 金额千位符转换* @param {*}} val //金额* @param {*}} util //单位* @returns*/
function formatMoney(val, util) {if(!val) return val;// 保留小时位数var count = util=='wan' ? 6 : 2;let str = val.toString().split('.');let re = /\d{1,3}(?=(\d{3})+$)/g;let n1 = str[0].replace(re, "$&,");var zeroCount = str.length > 1 && str[1] ? str[1] : ''// 小数点后面金额位置var strLength = str.length > 1 && str[1] ? str[1].length : 0for (let i = 0; i < (count-strLength); i++) {zeroCount += '0'}return str.length > 1 && str[1] ? `${n1}.${zeroCount}` : `${n1}.${zeroCount}`;
}

暴露指令index文件

directiveIndex.vue

import money from './moneyFormat'const install = function(Vue) {Vue.directive('money', money)
}export default install

引入自定义指令

main.js

import directive from './directiveIndex'Vue.use(directive)

使用方式

<el-input v-model="money" placeholder="请输入金额" v-money><template slot="append" ></template>
</el-input>

预览效果

在这里插入图片描述

相关文章:

金额千位符自定义指令

自定义指令文件 moneyFormat.js /*** v-money 金额千分位转换*/export default {inserted: inputFormatter({// 格式化函数formatter(num, util) {if(num null || num || num undefined || typeof(num) undefined){return }if(util 万元 || util 万){return formatMone…...

请不要用 JSON 作为配置文件,使用JSON做配置文件的缺点

我最近关注到有的项目使用JSON作为配置文件。我觉得这不是个好主意。 这不是JSON的设计目的&#xff0c;因此也不是它擅长的。JSON旨在成为一种“轻量级数据交换格式”&#xff0c;并声称它“易于人类读写”和“易于机器解析和生成”。 作为一种数据交换格式&#xff0c;JSON是…...

Hadabot:从网络浏览器操作 ROS2 远程控制器

一、说明 Hadabot Hadabot是一个学习ROS2和机器人技术的机器人套件。使用 Hadabot&#xff0c;您将能够以最小的挫败感和恐吓来构建和编程物理 ROS2 机器人。Hadabot套件目前正在开发中。它将仅针对ROS2功能&#xff0c;并强调基于Web的用户界面。 随着开发的进展&a…...

Kotlin 协程

Kotlin 协程&#xff08;Coroutines&#xff09;是一种轻量级的并发编程解决方案&#xff0c;旨在简化异步操作和多线程编程。它提供了一种顺序和非阻塞的方式来处理并发任务&#xff0c;使得代码可以更加简洁和易于理解。Kotlin 协程通过提供一套高级 API&#xff0c;使并发代…...

maven 从官网下载指定版本

1. 进入官网下载页面 Maven – Download Apache Maven 点击下图所示链接 2. 进入文件页&#xff0c;选择需要的版本 3. 选binaries 4. 选文件&#xff0c;下载即可...

数据结构---串(赋值,求子串,比较,定位)

目录 一.初始化 顺序表中串的存储 串的链式存储 二.赋值操作&#xff1a;将str赋值给S 链式表 顺序表 三.复制操作&#xff1a;将chars复制到str中 链式表 顺序表 四.判空操作 链式表 顺序表 五.清空操作 六.串联结 链式表 顺序表 七.求子串 链式表 顺序表…...

WPF CommunityToolkit.Mvvm

文章目录 前言ToolkitNuget安装简单使用SetProperty&#xff0c;通知更新RealyCommandCanExecute 新功能&#xff0c;代码生成器ObservablePropertyNotifyCanExecuteChangedForRelayCommand其他功能对应关系 NotifyPropertyChangedFor 前言 CommunityToolkit.Mvvm&#xff08;…...

Vue开发中如何解决国际化语言切换问题

Vue开发中如何解决国际化语言切换问题 引言&#xff1a; 在如今的全球化时代&#xff0c;应用程序的国际化变得越来越重要。为了让不同地区的用户能够更好地使用应用程序&#xff0c;我们需要对内容进行本地化&#xff0c;以适应不同语言和文化环境。对于使用Vue进行开发的应用…...

基于springboot+vue的流动人口登记系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…...

Stable Diffusion的使用以及各种资源

Stable Diffsuion资源目录 SD简述sd安装模型下载关键词&#xff0c;描述语句插件管理controlNet自己训练模型 SD简述 Stable Diffusion是2022年发布的深度学习文本到图像生成模型。它主要用于根据文本的描述产生详细图像&#xff0c;尽管它也可以应用于其他任务&#xff0c;如…...

Redis 分布式锁的实现方式

一般来说&#xff0c;在对数据进行“加锁”时&#xff0c;程序首先需要通过获取&#xff08;acquire&#xff09;锁来得到对数据排他性访问的能力&#xff0c;然后才能对数据执行一系列操作&#xff0c;最后还要将锁释放&#xff08;release&#xff09;给其他程序。 对于能够…...

VMware上搭建的虚拟机突然本地无法连接服务器

长时间没有使用VMware 虚拟机了&#xff0c;今天突然登录上去&#xff0c;启动虚拟服务器后发现本地等不了了&#xff0c; 经过排查发现是开启了&#xff1a;VirtualBox Host-Only Network 关闭之后就本机就可以直连服务器了...

JDBC回顾

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 JDBC回顾 前言一、JDBC1.JDBC是什么&#xff1f;2.如何使用&#xff1f;&#xff08;1&#xff09;注册驱动&#xff08;2&#xff09;获取连接&#xff08;3&#xff09;操作…...

mq 消息队列 mqtt emqx ActiveMQ RabbitMQ RocketMQ

省流&#xff1a; 十几年前&#xff0c;淘宝的notify&#xff0c;借鉴ActiveMQ。京东的ActiveMQ集群几百台&#xff0c;后面改成JMQ。 Linkedin的kafka&#xff0c;因为是scala&#xff0c;国内很多人不熟。淘宝的人把kafka用java写了一遍&#xff0c;取名metaq&#xff0c;后…...

沃尔玛卖家必看!解决订单被Kan、Feng号问题的终极方案!

近期有很多沃尔玛卖家和工作室联系到我提到说在沃尔玛平台上下单&#xff0c;买家号出现副款义常订单被k掉&#xff0c;是什么原因、我们该如何去解决呢&#xff1f; 以下是一些可能导至你的测评订单被k单的原因&#xff1a; 1.技术问题&#xff1a;有时&#xff0c;网站或系…...

浅谈日常使用的 Docker 底层原理-三大底座

适合的读者&#xff0c;对Docker有过简单了解的朋友&#xff0c;想要进一步了解Docker容器的朋友。 前言 回想我这两年&#xff0c;一直都是在使用 Docker&#xff0c;看过的视频、拜读过的博客&#xff0c;大都是在介绍 Docker 的由来、使用、优点和发展趋势&#xff0c;但对…...

前端面试:【DOM】编织网页的魔法

嘿&#xff0c;亲爱的代码魔法师&#xff01;在JavaScript的奇幻世界里&#xff0c;有一项强大的技能&#xff0c;那就是DOM操作。DOM&#xff08;文档对象模型&#xff09;操作允许你选择、修改和创建网页元素&#xff0c;就像是在编织一个魔法的网页。 1. 什么是DOM&#xff…...

基于MATLAB开发AUTOSAR软件应用层Code mapping专题-part 2 Inport和Outports 标签页介绍

上篇我们介绍了Function页的内容,这篇我们介绍Inports和Outports页的内容,这里我们再次强调一个概念,code mapping是以simulink的角度去看的,就是先要在模型中建立simulink模块,在code mapping里映射他要对应的autosar的元素,之后生成代码时的c语言的名字是以Autosar的元…...

第9步---MySQL的索引和存储引擎

第9步---MySQL的索引和存储引擎 1.索引 1.1分类 索引可以快速的找出具有特定值的行。不用从头开始进行寻找了。 类别 hash和btree hash 根据字段值生生成一个hash的值 快速的进行定位到对应的行的值 可能会出现相同的值&#xff0c;找到对应的空间会出现对应的值 btree树…...

Numpy入门(3)—线性代数

线性代数 线性代数&#xff08;如矩阵乘法、矩阵分解、行列式以及其他方阵数学等&#xff09;是任何数组库的重要组成部分&#xff0c;NumPy中实现了线性代数中常用的各种操作&#xff0c;并形成了numpy.linalg线性代数相关的模块。本节主要介绍如下函数&#xff1a; diag&am…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...