Vue自定义指令实现对数字进行千分位分隔
说在前面
对数字进行千分位分隔后展示应该是大部分同学都做过的功能了吧，常规的做法通常是编写一个工具函数来对数据进行转换，那么我们可不可以通过vue指令来实现这一功能呢？
效果展示
实现原理
非输入框
非输入框我们只需要对其展示进行处理，我们可以判断绑定元素的innerHTML是否不为空，不为空的话则直接对其innerHTML内容进行格式化。
export default {
bind: function (el, binding) {
const separator = binding.value || ",";
if (el.innerHTML) {
el.innerHTML = addThousandSeparator(el.innerText, separator);
}
},
};
输入框
对于输入框，我们希望其有以下功能：
1、输入的时候去掉分隔符
这里我们只需要监听元素的聚焦(focus)事件即可，取到元素的值，将其分隔符去掉后重新赋值。
el.addEventListener("focus", (event) => {
const value = event.target.value;
event.target.value = deleteThousandSeparator(value, separator);
});
2、输入完成后添加分隔符
这里我们只需要监听元素的失焦(blur)事件即可，取到元素的值，对其进行添加分隔符处理后重新赋值。
el.addEventListener("blur", (event) => {
const value = event.target.value;
event.target.value = addThousandSeparator(value, separator);
});
千分位分隔函数
function addThousandSeparator(num, separator = ",") {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separator);
}
num.toString(): 将输入的数字 num 转换为字符串，以便后续处理。
.replace(/\B(?=(\d{3})+(?!\d))/g, separator): 这里使用了正则表达式进行替换操作。具体解释如下：
- \B: 表示非单词边界，用于匹配不在单词边界处的位置。
- (?=(\d{3})+(?!\d)): 使用正向预查来匹配每三位数字的位置，但不匹配末尾不足三位的数字。
- (\d{3})+: 匹配连续的三位数字。
- separator: 作为参数传入的分隔符，默认为 ,。
- g: 表示全局匹配，即匹配所有满足条件的位置。
这样，通过正则表达式的替换功能，在数字字符串中的每三位数字之间插入指定的千位分隔符，从而实现千位分隔符的添加。
去掉千分位分隔
function deleteThousandSeparator(numberString, separator = ",") {
return numberString.replace(new RegExp(separator, "g"), "");
}
直接将字符串中的分隔符全部替换为空即可。
完整代码
function addThousandSeparator(num, separator = ",") {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separator);
}
function deleteThousandSeparator(numberString, separator = ",") {
return numberString.replace(new RegExp(separator, "g"), "");
}
export default {
bind: function (el, binding) {
const separator = binding.value || ",";
if (el.innerHTML) {
el.innerHTML = addThousandSeparator(el.innerText, separator);
}
el.addEventListener("focus", (event) => {
const value = event.target.value;
event.target.value = deleteThousandSeparator(value, separator);
});
el.addEventListener("blur", (event) => {
const value = event.target.value;
event.target.value = addThousandSeparator(value, separator);
});
},
};组件库
组件文档
目前该组件也已经收录到我的组件库，组件文档地址如下：http://jyeontu.xyz/jvuewheel/#/JThousandView
组件内容
组件库中还有许多好玩有趣的组件，如：
- 悬浮按钮
- 评论组件
- 词云
- 瀑布流照片容器
- 视频动态封面
- 3D轮播图
- web桌宠
- 贡献度面板
- 拖拽上传
- 自动补全输入框
- 图片滑块验证
等等……
组件库源码
组件库已开源到gitee，有兴趣的也可以到这里看看：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse
以上就是Vue自定义指令实现对数字进行千分位分隔的详细内容，更多关于Vue数字千位分隔的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要给大家介绍了关于如何解决vue3报错:找不到模块或其相应的类型声明的相关资料,这个错误提示是指在代码中引用了Vue模块,但是系统找不到该模块或者缺少相应的类型声明文件,需要的朋友可以参考下2023-07-07
在本篇文章里小编给大家整体了一篇关于vue3.0自定义指令（drectives)知识点总结，有兴趣的朋友们可以学习下。2020-12-12
这篇文章主要介绍了vue项目中自定义video视频控制条的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
Element 的 el-table 表格实现单元格合并功能
这篇文章主要介绍了Element 的 el-table 表格实现单元格合并功能,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-07-07
Vue中使用require.context自动引入组件的操作方法
require.context 是 webpack 提供的一个API,用于创建context,即一组具有相同上下文的模块,使用 require.context 可以方便地加载多个模块,并且可以灵活地控制模块的加载顺序和依赖关系,本文给大家讲解Vue中使用require.context自动引入组件的方法,感兴趣的朋友一起看看吧2024-01-01
在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,下面这篇文章主要给大家介绍了关于Vue3引入axios封装接口的两种方法,需要的朋友可以参考下2022-10-10
vue 中 element-ui table合并上下两行相同数据单元格
这篇文章主要介绍了vue 中 element-ui table合并上下两行相同数据单元格,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
Vue+ElementUI 封装简易PaginationSelect组件的详细步骤
这篇文章主要介绍了Vue+ElementUI 封装简易PaginationSelect组件,这里简单介绍封装的一个Pagination-Select组件几个步骤，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue中modal传输数据并刷新部分页面数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue Extends 扩展选项用法,结合完整实例形式分析了Vue Extends 扩展选项相关使用技巧与操作注意事项,需要的朋友可以参考下2019-09-09
最新评论