格式化工具

本文档介绍格式化工具的使用方法。

FormatUtils

格式化工具类，支持文件大小、数字、日期等格式化。

文件大小格式化

import { FormatUtils } from '@vben/utils';

// 字节转可读格式
FormatUtils.formatFileSize(1024);        // 1 KB
FormatUtils.formatFileSize(1048576);     // 1 MB
FormatUtils.formatFileSize(1073741824);  // 1 GB

// 自定义精度
FormatUtils.formatFileSize(1234567, 2);  // 1.18 MB

数字格式化

import { FormatUtils } from '@vben/utils';

// 千分位分隔
FormatUtils.formatNumber(1234567);       // 1,234,567
FormatUtils.formatNumber(1234567.89);    // 1,234,567.89

// 保留小数位
FormatUtils.formatNumber(123.456, 2);    // 123.46

// 货币格式
FormatUtils.formatCurrency(1234.56);     // ¥1,234.56
FormatUtils.formatCurrency(1234.56, '$'); // $1,234.56

日期格式化

import { FormatUtils } from '@vben/utils';

const date = new Date();

// 基础格式化
FormatUtils.formatDate(date, 'YYYY-MM-DD');           // 2024-01-01
FormatUtils.formatDate(date, 'YYYY-MM-DD HH:mm:ss'); // 2024-01-01 12:30:45
FormatUtils.formatDate(date, 'MM/DD/YYYY');           // 01/01/2024

// 相对时间
FormatUtils.formatRelativeTime(date);  // 刚刚 / 5分钟前 / 1小时前

手机号格式化

import { FormatUtils } from '@vben/utils';

// 手机号分隔
FormatUtils.formatPhone('13800138000');  // 138 0013 8000

// 手机号脱敏
FormatUtils.maskPhone('13800138000');    // 138****8000

身份证格式化

import { FormatUtils } from '@vben/utils';

// 身份证脱敏
FormatUtils.maskIdCard('110101199001011234');  // 110101********1234

使用 dayjs

import dayjs from 'dayjs';

// 格式化日期
dayjs().format('YYYY-MM-DD');
dayjs().format('YYYY-MM-DD HH:mm:ss');

// 相对时间
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn';

dayjs.extend(relativeTime);
dayjs.locale('zh-cn');

dayjs().fromNow();  // 刚刚
dayjs().subtract(1, 'hour').fromNow();  // 1小时前

完整示例

<script setup lang="ts">
import { ref } from 'vue';
import { FormatUtils } from '@vben/utils';

const fileSize = ref(1234567);
const number = ref(1234567.89);
const phone = ref('13800138000');
const idCard = ref('110101199001011234');
const date = ref(new Date());
</script>

<template>
  <div class="format-demo">
    <a-descriptions title="格式化示例" bordered>
      <a-descriptions-item label="文件大小">
        {{ fileSize }} 字节 = {{ FormatUtils.formatFileSize(fileSize) }}
      </a-descriptions-item>
      
      <a-descriptions-item label="数字格式化">
        {{ number }} = {{ FormatUtils.formatNumber(number) }}
      </a-descriptions-item>
      
      <a-descriptions-item label="货币格式化">
        {{ number }} = {{ FormatUtils.formatCurrency(number) }}
      </a-descriptions-item>
      
      <a-descriptions-item label="手机号">
        {{ phone }} = {{ FormatUtils.formatPhone(phone) }}
      </a-descriptions-item>
      
      <a-descriptions-item label="手机号脱敏">
        {{ phone }} = {{ FormatUtils.maskPhone(phone) }}
      </a-descriptions-item>
      
      <a-descriptions-item label="身份证脱敏">
        {{ idCard }} = {{ FormatUtils.maskIdCard(idCard) }}
      </a-descriptions-item>
      
      <a-descriptions-item label="日期格式化">
        {{ FormatUtils.formatDate(date, 'YYYY-MM-DD HH:mm:ss') }}
      </a-descriptions-item>
      
      <a-descriptions-item label="相对时间">
        {{ FormatUtils.formatRelativeTime(date) }}
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

API 参考

formatFileSize

格式化文件大小。

FormatUtils.formatFileSize(bytes: number, decimals?: number): string

formatNumber

格式化数字。

FormatUtils.formatNumber(num: number, decimals?: number): string

formatCurrency

格式化货币。

FormatUtils.formatCurrency(amount: number, symbol?: string): string

formatDate

格式化日期。

FormatUtils.formatDate(date: Date | string | number, format: string): string

formatPhone

格式化手机号。

FormatUtils.formatPhone(phone: string): string

maskPhone

手机号脱敏。

FormatUtils.maskPhone(phone: string): string

maskIdCard

身份证脱敏。

FormatUtils.maskIdCard(idCard: string): string

参考资源

• dayjs 文档