更新记录

0.0.2(2024-08-20) 下载此版本

  • chore: 依赖更新

0.0.1(2024-08-20) 下载此版本

  • init

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.23 app-vue app-uvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × ×

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 设置金融符号,设置reversetrue可以让符号在数字末尾

<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 -

打赏

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问