丝绒-货币投入

用于 Svelte 5 的全特有货币输入组件,处理格式化,本地化,以及您键入时的验证.

玩着它 现场演示

• 特征
• 安装
• 使用量
• 如何运作
• API 密码
• 实例
• 样式
• 出口公用事业
  • 格式值选项
• Svelte 4/移徙指南
• 捐款

特征

• 格式 正数 财务报告和审定财务报表 负数 数值
• 积分 Intl.NumberFormat 页:1 本地化 货币面额
• 支助 缩略语 (k、m、b) 快速投入
• 可配置 小数精度 有多个控制选项
• 最小/最大制约因素 用箭头键步
• 自定义 前缀 财务报告和审定财务报表 后缀 支助
• 零内置样式 - 与Tailwind、vanilla CSS或任何框架合作
• 简单,单身 <input> 元素( 无包装)
• 满 类型脚本 支助
• 轻巧 - ~3.6KB 无运行时间依赖
• API和逻辑的灵感很大 @cchanxzy (英语)是因为 反应-货币-输入-域

安装

# bun
bun add @canutin/svelte-currency-input

# pnpm
pnpm add @canutin/svelte-currency-input

# npm
npm install @canutin/svelte-currency-input

# yarn
yarn add @canutin/svelte-currency-input

使用量

<script lang="ts">
    import { CurrencyInput } from '@canutin/svelte-currency-input';

    let value = $state('1234.56');
</script>

<CurrencyInput bind:value intlConfig={{ locale: 'en-US', currency: 'USD' }} />

输入显示 $1,234.56 时 value 包含原始字符串 "1234.56"。 。 。 .

如何运作

该部分是单一的 <input> 键。 这个 value 道具是一个 字符串 表示未格式化编号:

• "" = 空输入
• "0" = 0 = 零 (单位:千美元)
• "1234.56" = 号码1234.56

格式化显示(例如, $1,234.56由内部处理。 对于需要原始值的窗体提交,可以添加隐藏输入:

<form>
    <CurrencyInput bind:value name="display" />
    <input type="hidden" name="amount" {value} />
</form>

API 密码

道具

类型

interface IntlConfig {
    locale: string;
    currency?: string;
    // Also accepts other Intl.NumberFormatOptions
}

interface CurrencyInputValues {
    float: number | null; // Parsed number or null if empty
    formatted: string; // Display value: "$1,234.56"
    value: string; // Raw value: "1234.56"
}

实例

国际货币

<CurrencyInput bind:value intlConfig={{ locale: 'de-DE', currency: 'EUR' }} />
<!-- Displays: 1.234,56 € -->

十进制精度

<!-- Limit to 2 decimals while typing, pad to 2 on blur -->
<CurrencyInput
    bind:value
    intlConfig={{ locale: 'en-US', currency: 'USD' }}
    decimalsLimit={2}
    decimalScale={2}
/>

最小、最大和步数

<!-- Use arrow keys to increment/decrement by 10, constrained to 0-100 -->
<CurrencyInput
    bind:value
    intlConfig={{ locale: 'en-US', currency: 'USD' }}
    min={0}
    max={100}
    step={10}
/>

自定义前缀和后缀

<!-- Points system -->
<CurrencyInput bind:value suffix=" pts" decimalsLimit={0} />

<!-- Bitcoin -->
<CurrencyInput bind:value prefix="₿ " decimalsLimit={8} />

简称

类型 1k, (中文(简体) ), 2.5m,或 1b 快速输入大数 :

<CurrencyInput
    bind:value
    intlConfig={{ locale: 'en-US', currency: 'USD' }}
    placeholder="Try 1k, 2.5m, or 1b"
/>
<!-- Typing "2.5m" results in value="2500000" -->

回电

<CurrencyInput
    bind:value
    intlConfig={{ locale: 'en-US', currency: 'USD' }}
    oninputvalue={({ float, formatted, value }) => {
        console.log('On input:', { float, formatted, value });
    }}
    onchangevalue={({ float, formatted, value }) => {
        console.log('On blur:', { float, formatted, value });
    }}
/>

输入元素参考

<script>
    let inputRef = $state(null);

    function focusInput() {
        inputRef?.focus();
    }
</script>

<CurrencyInput bind:ref={inputRef} bind:value />
<button onclick={focusInput}>Focus</button>

样式

该部分是单一的 <input> 没有内置样式的元素。 你可以用这个 class 用于样式的道具 :

<!-- Tailwind CSS -->
<CurrencyInput bind:value class="rounded border px-3 py-2 focus:ring-2 focus:ring-blue-500" />

<!-- Custom CSS class -->
<CurrencyInput bind:value class="my-currency-input" />

对于基于数值的动态样式(正/负/正),使用回调:

<script>
    let value = $state('');
    let colorClass = $state('');

    function updateStyle({ float }) {
        if (float === null || float === 0) colorClass = 'text-gray-500';
        else if (float > 0) colorClass = 'text-green-600';
        else colorClass = 'text-red-600';
    }
</script>

<CurrencyInput bind:value class="border px-3 py-2 {colorClass}" oninputvalue={updateStyle} />

出口公用事业

软件包输出用于组件外的公用功能:

import {
    formatValue,
    getLocaleConfig,
    cleanValue,
    parseAbbrValue,
    abbrValue
} from '@canutin/svelte-currency-input';

// Format a value with locale
const formatted = formatValue({
    value: '1234.56',
    intlConfig: { locale: 'en-US', currency: 'USD' }
});
// → "$1,234.56"

// Get locale configuration
const config = getLocaleConfig({ locale: 'de-DE', currency: 'EUR' });
// → { decimalSeparator: ',', groupSeparator: '.', prefix: '', suffix: ' €', ... }

// Parse abbreviations
const expanded = parseAbbrValue('2.5m', 'en-US');
// → "2500000"

格式值选项

默认, formatValue 将小数切入到 decimalScale设置 roundValue: true 改为取而代之,在用浮点精密工艺品格式化计算值时有用:

// Default: truncates
formatValue({
    value: '87.5',
    intlConfig: { locale: 'en-US', currency: 'USD' },
    decimalScale: 0
});
// → "$87"

// With roundValue: rounds
formatValue({
    value: '87.5',
    intlConfig: { locale: 'en-US', currency: 'USD' },
    decimalScale: 0,
    roundValue: true
});
// → "$88"

// Useful for computed values with floating-point issues
const sum = 500.75 + 300.5 - 200.25 - 150.33; // = 450.66999999999996
formatValue({
    value: String(sum),
    intlConfig: { locale: 'en-US', currency: 'USD' },
    decimalScale: 2,
    roundValue: true
});
// → "$450.67" (without roundValue, would be "$450.66")

第4节

对于 Svelte 4 支持,请使用 0.x 版本数字 :

npm install @canutin/svelte-currency-input@0

如果你正在升级 从v 移徙指南。 。 。 .

捐款

见 捐款额 用于建立、测试和贡献准则.

许可证

麻省理工学院