更新记录

0.0.3（2025-08-31） 下载此版本

• chore: 更新文档

0.0.2（2024-08-20） 下载此版本

• chore: 依赖更新

0.0.1（2024-08-20） 下载此版本

• init

平台兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-amount 金额组件

一个功能丰富的金额展示组件，用于格式化和美化数字金额的显示。支持货币符号、小数精度、千位分隔符、动画过渡等多种配置，可用于展示价格、金额、统计数据等多种场景。组件提供了丰富的自定义选项，可以满足各种金额展示需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 金额组件文档 - 站点1
• 金额组件文档 - 站点2
• 金额组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-amount
2. 导入后可能需要重新编译项目
3. 在页面中使用l-amount组件

代码演示

基础用法

最简单的金额组件用法，只需要设置金额值即可。

<l-amount value="1234.56"></l-amount>

自定义货币符号

设置不同的货币符号。

<l-amount value="1234.56" symbol="$"></l-amount>
<l-amount value="1234.56" symbol="€"></l-amount>
<l-amount value="1234.56" symbol="£"></l-amount>

隐藏货币符号

不显示货币符号，只展示数字部分。

<l-amount value="1234.56" :show-symbol="false"></l-amount>

设置精度

控制小数点后显示的位数。

<l-amount value="1234.56789" :precision="3"></l-amount>

隐藏小数部分

只显示整数部分，不显示小数。

<l-amount value="1234.56" :show-decimal="false"></l-amount>

分隔符

通过 show-separator 属性设置为true可显示分隔符，默认为万分位，通过:separator-digits="3"可显示为千分位。

<l-amount value="1234567.89" show-separator></l-amount>

货币符号位置

设置货币符号在数字后面显示。

<l-amount value="1234.56" reverse></l-amount>

数字变化动画

添加数字变化时的过渡动画效果。

<l-amount value="1234.56" transition :duration="2000"></l-amount>

中文大写金额

将数字转换为中文大写金额表示。

<l-amount value="1234.56" capital></l-amount>

自定义样式

设置金额的字体大小、颜色等样式。

<l-amount value="1234.56" font-size="24px" color="#ff5500"></l-amount>

插槽

支持导出整数integer、小数decimal、中文capital,自行设置样式。

<l-amount :value="12345.125" :show-separator="true">
    <template #default="{integer, decimal}">
         <text>{{integer}}.{{decimal}}</text>
    </template>
</l-amount>

大写中文

当 capital 属性设置为 true，转成大字中文。

 <l-amount :value="123456.123" :capital="true"/>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-amount/components/lime-amount -->
<lime-amount />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

Events 事件

Slots 插槽

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助