el-input-number/el-input 实现实时输入数字转换千分位(失焦时展示千分位)

el-input-number/el-input 实现实时输入数字转换千分位(失焦时展示千分位)

我把封装指令的代码放在了main.js,代码如下

// 金额展示千分位
Vue.directive("thousands", {inserted: function(el, binding) {// debugger// 获取input节点if (el.tagName.toLocaleUpperCase() !== "INPUT") {el = el.getElementsByTagName("input")[0];}// 千分位格式化el.value = parseFloat(el.value).toLocaleString("zh", {minimumFractionDigits: 2,maximumFractionDigits: 2});// 聚焦转化为数字格式（去除千分位）el.onfocus = e => {const a = el.value.replace(/,/g, ""); // 去除千分号的','el.value = parseFloat(a).toFixed(2);};// 失去焦点重新格式化el.onblur = e => {setTimeout(() => {// 恢复原始值// el.value = parseFloat(el.value);// 格式化为千分位el.value = parseFloat(el.getAttribute("aria-valuenow")).toLocaleString("zh",{minimumFractionDigits: 2,maximumFractionDigits: 2});}, 0);};},update: function(el, binding) {// debugger// 获取input节点if (el.tagName.toLocaleUpperCase() !== "INPUT") {el = el.getElementsByTagName("input")[0];}setTimeout(() => {// 千分位格式化const valueWithoutComma = el.value.replace(/,/g, ""); // 去除千分号的','// 转换为浮点数const floatValue = parseFloat(valueWithoutComma);// 格式化为千分位el.value = floatValue.toLocaleString("zh", {minimumFractionDigits: 2,maximumFractionDigits: 2});}, 100);}
});

在html界面使用例子如下（直接加入：v-thousands 即可）

				<el-input-numberv-thousandsv-if="isCanEdit"v-model="addForm.base_header.atl_amt":step="1":min="0"style="width: 160px;"placeholder="0.00"controls-position="right"@change="changeAtlAmt"/>