更新记录

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

• chore: 依赖更新

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

• init

平台兼容性

lime-amount 金融数字

• lime-amount 金融数字，用于展示金额、价格等，可以转换为人民币大写，兼容uniapp/uniappx(web,ios,安卓)。
• 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

打赏

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