vue3+elementui 数字输入框转千分位展示

treasurecp

已于 2024-05-09 16:38:30 修改

阅读量1.6k

点赞数 4

CC 4.0 BY-SA版权

文章标签： elementui vue.js 前端

于 2024-05-06 16:54:08 首次发布

本文链接：https://blog.csdn.net/treasurecp/article/details/138499298

本文介绍了如何在Vue.js应用中创建一个名为thousands的自定义指令，用于金额的千分位格式化，并在`el-input`组件中使用该指令实现动态格式化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、在main.js中添加自定义指令

  const instance = createApp(App);
  // 金额展示千分位
  instance.directive('thousands', {
    mounted: function (el, binding) {
      // 获取数字输入框
      const numberInput = el.getElementsByTagName('input')[0];
      // 创建一个新的 el-input 元素用来展示格式化后的值
      const textInput = document.createElement('input');
      textInput.type = 'text';
      textInput.autocomplete = 'off';
      textInput.classList.add('el-input__inner');
      // 把创建的元素插入到数字框后
      numberInput.insertAdjacentElement('afterend', textInput);
      // 默认效果
      textInput.style.display = 'block';
      numberInput.style.display = 'none';
      // 文本框聚焦时显示原来数字类型框
      textInput.onfocus = (e) => {
        textInput.style.display = 'none';
        numberInput.style.display = 'block';
        // 等待数字框加载成功时聚焦数字框
        nextTick(() => {
          numberInput.focus();
        });
      };
      // 数字框失焦时显示格式化后的值
      numberInput.onblur = (e) => {
        numberInput.style.display = 'none';
        textInput.style.display = 'block';
      };
    },
    updated: function (el, binding) {
      // debugger
      // 数据改变时格式化赋值到隐藏的文本框
      if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
        const numberInput = el.getElementsByTagName('input')[0];
        const textInput = el.getElementsByTagName('input')[1];
        // 同步禁用状态
        const parentClass = el.classList.value;
        if (parentClass.includes('is-disabled')) {
          textInput.setAttribute('disabled', true);
        } else {
          textInput.removeAttribute('disabled');
        }
        // 千分位格式化
        const valueWithoutComma = numberInput.value.replace(/,/g, ''); // 去除千分号的','
        if (valueWithoutComma) {
          // 转换为浮点数
          const floatValue = parseFloat(valueWithoutComma);
          // 格式化为千分位
          textInput.value = floatValue.toLocaleString('zh', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          });
        } else {
          textInput.value = '';
        }
      }
    },
  });

二、在具体组件中使用,组件上加上面自定义的指令v-thousands

    <el-input
      v-thousands
      v-model="yourValue"
      type="number"
      clearable
     ></el-input>

三、查看效果