对数字进行千分位分隔后展示应该是大部分同学都做过的功能了吧，常规的做法通常是编写一个工具函数来对数据进行转换，那么我们可不可以通过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): 这里使用了正则表达式进行替换操作。具体解释如下：
这样，通过正则表达式的替换功能，在数字字符串中的每三位数字之间插入指定的千位分隔符，从而实现千位分隔符的添加。
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
组件库中还有许多好玩有趣的组件，如：
等等……
组件库已开源到gitee，有兴趣的也可以到这里看看：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse
以上就是Vue自定义指令实现对数字进行千分位分隔的详细内容，更多关于Vue数字千位分隔的资料请关注插件窝其它相关文章！