Cuttlefish Docs
  • 简体中文

    • spz-currency 金额

    何时使用

    需要展示带有货币符号的金额。

    代码演示

    基本用法

    最简单的用法，只需要指定金额数值。金额的符号、位置和格式默认都通过 window.SHOPLAZZA 对象获取。元素会创建一个带有 money 类的子元素来展示金额。

    <script>
  window.SHOPLAZZA = {
    currency_symbol: '¥',
    currency_symbol_pos: 'left',
    money_format: 'amount'
  };
</script>

<spz-currency value="999998888" layout="container"></spz-currency>

    添加自定义类

    给带有 money 类的子元素添加自定字体颜色类。

    <spz-currency container-class="text-pink-500" value="999998888" layout="container"></spz-currency>

    自定义金额格式

    自定义货币符号和位置。

    <spz-currency
  value="999998888"
  layout="container"
  format="amount_with_comma_separator"
  symbol="€"
  symbol-position="left"
></spz-currency>

    使用货币代码，等价于上面的自定义货币符号和位置。

    <spz-currency
  value="999998888"
  layout="container"
  format="amount_with_comma_separator"
  code="EUR"
></spz-currency>

    属性

    属性名说明类型默认值是否必需
    value金额number-是
    format指定金额的显示格式formatTypeamount否
    symbol金额符号string$否
    symbol-position金额符号位置"left" | "right"left否
    code指定一个货币代码，支持大约150种货币代码。例如：USD, EUR 等string-否
    container-class给class为 money 的子元素添加类string-否

    formatType

    支持格式例子
    amount999,998,888.00
    amount_no_decimals999,998,888
    amount_with_comma_separator999.998.888,00
    amount_no_decimals_with_comma_separator999.998.888
    amount_with_apostrophe_separator999'998'888.00

    AI 摘要（LLM Ready）

    • 组件标识：spz-currency
    • 用途一句话：展示带有货币符号的金额。
    • 可识别属性条目：11
    • 可识别方法小节：0
    • 可识别事件小节：0
    • 关键属性名（Top）：value、format、symbol、symbol-position、code、container-class
    • 关键方法名（Top）：无（待补充）
    • 关键事件名（Top）：无（待补充）
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/