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

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

TCP/IP 网络编程 | 服务端 客户端的封装

设计模式 文章目录 设计模式一、socket.h 接口&#xff08;interface&#xff09;二、socket.cpp 实现&#xff08;implementation&#xff09;三、server.cpp 使用封装&#xff08;main 函数&#xff09;四、client.cpp 使用封装&#xff08;main 函数&#xff09;五、退出方法…...