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);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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

				<el-input-number
                  v-thousands
                  v-if="isCanEdit"
                  v-model="addForm.base_header.atl_amt"
                  :step="1"
                  :min="0"
                  style="width: 160px;"
                  placeholder="0.00"
                  controls-position="right"
                  @change="changeAtlAmt"
                />
1
2
3
4
5
6
7
8
9
10
11