组件
格式化 Format
Format:格式化组件。用 Intl 格式化数字、货币、字节和相对时间。部件:Number、Byte、Time、RelativeTime。
#基础用法
12,345.671.54 MB09:308 months ago
<script setup lang="ts">
import { Format } from "@bysages/vue";
// A fixed past date, not Date.now() — the relative time resolves against
// the machine clock, and a server/client instant far from a unit boundary
// hydrates to the same words.
const released = new Date(2026, 0, 15);
</script>
<template>
<div class="flex gap-6">
<Format.Number :value="12345.67" />
<Format.Byte :value="1536000" />
<Format.Time :value="new Date(2026, 4, 4, 9, 30)" />
<Format.RelativeTime :value="released" />
</div>
</template>
#属性
#Byte
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
unit | 'bit' | 'byte' | 显示字节时使用的单位粒度 | |
unitDisplay | 'long' | 'short' | 'narrow' | 单位的显示方式 | |
unitSystem | 'decimal' | 'binary' | 格式化使用的单位制 | |
value | number | 要格式化的字节数 |
#Number
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
compactDisplay | 'short' | 'long' | undefined | — | |
currencyDisplay | string | undefined | — | |
currencySign | string | undefined | — | |
notation | 'standard' | 'scientific' | 'engineering' | 'compact' | undefined | — | |
signDisplay | 'auto' | 'never' | 'always' | 'exceptZero' | undefined | — | |
unit | string | undefined | — | |
unitDisplay | 'short' | 'long' | 'narrow' | undefined | — | |
value | number | 要格式化的字节数 |
#RelativeTime
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
localeMatcher | Intl.RelativeTimeFormatLocaleMatcher | 区域设置匹配算法;详情见 Intl 文档(https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation) | |
numeric | Intl.RelativeTimeFormatNumeric | 输出消息的格式 | |
style | Intl.RelativeTimeFormatStyle | 国际化消息的长度 | |
value | Date | 要格式化的日期 |
#Time
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
value | string | Date | 要格式化的时间 |