LimeAmount 金额组件

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

插件依赖：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 />

插件标签说明

标签名	说明
l-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 属性说明

属性名	说明	类型	默认值
value	金额数值	number | string	-
symbol	货币符号	string	'￥'
precision	数值精度，小数点后的位数	number	2
reverse	是否将货币符号放在数字后面	boolean	false
transition	数字变化是否使用动画	boolean	false
duration	数字变化动画时长（毫秒）	number	1000
separatorDigits	分隔位数，多少位数字为一组	number	4
separator	分隔符	string	','
showSymbol	是否显示货币符号	boolean	true
showDecimal	是否显示小数部分	boolean	true
showSeparator	是否显示分隔符	boolean	false
capital	是否转换为中文大写金额	boolean	false
roundUp	是否四舍五入	boolean	true
fontSizeRatio	小数部分与整数部分的字体大小比例	number | string	-
fontSize	字体大小	number | string	-
color	文字颜色	string	-
lStyle	自定义样式	string	-

Events 事件

事件名	说明	回调参数
change	金额数值变化时触发	value: number | string

Slots 插槽

名称	说明
symbol	自定义货币符号
integer	自定义整数部分
decimal	自定义小数部分

主题定制

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

变量名称	默认值	描述
--l-amount-color	$text-color-1	金额文字颜色
--l-amount-font-size	inherit	金额字体大小
--l-amount-font-weight	inherit	金额字体粗细
--l-amount-font-size-ratio	0.7em	小数部分与整数部分的字体大小比例

支持与赞赏

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

支付宝赞助	微信赞助

源代码

组件源码