LimeAmount 金融数字

• lime-amount 金融数字，用于展示金额、价格等，可以转换为人民币大写，兼容uniapp/uniappx。
• uniappx 安卓 app 基于drawable实现。
• 插件依赖lime-shared介意勿下。

安装

在 导入。

代码演示

基础用法

通过 value 设置金额。

<l-amount :value="1234.125" />

动效

通过 transition 属性设置为true可让数字从0滚动到目标值。

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

分隔符

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

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

样式

通过font-size 设置字体大小，color 设置颜色，font-size-ratio设置小数分隔符与整数的比例或直接设置大小。

<l-amount :value="123456.123" font-size="60rpx" font-size-ratio="30rpx" color="red"/>

金融符号

通过 symbol 设置金融符号，设置reverse为true可以让符号在数字末尾

<l-amount :value="123456.123" symbol="$" :reverse="true" />

插槽

支持导出整数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"/>

插件标签

• 默认 l-amount 为 component
• 默认 lime-amount 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Props

参数	说明	类型	默认值
value	金额	number	-
symbol	金融符号	string	￥
reverse	是否置后金额符号位置	boolean	false
precision	数字精度，小数点后保留几位	number	2
roundUp	数字精度取舍是否四舍五入	boolean	true
transition	数字变化是否使用动画	boolean	false
duration	数字变化动画时长	number	1000
separatorDigits	分隔符位置	number	4
separator	分隔符	string	,
showSymbol	是否显示金融符号	boolean	true
showDecimal	是否显示小数	boolean	true
showSeparator	是否显示分隔符	boolean	false
capital	数字是否转换为大写中文	boolean	false
fontSize	整数字体大小	string	-
fontSizeRatio	金融符号小数与整数的比例或字体大小	string	0.7
color	颜色	string	-

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码