amount.md
2.54 KB
Amount 金融数字
金融数字，一般用于金额，数量等。参考 Mand Mobile - Amount
359a08e0c7ae884a43f11b9ce5e9fe0b4d034877/examples/views/docs/component/amount.md#">基础用法
::: snippet 设置value为基本数值，数值必须是Number类型
<template>
<div class="amount-demo">
<p><zui-amount :value="1234"></zui-amount></p>
</div>
</template>
<style>
.amount-demo p {
font-size: 24px;
}
</style>
:::
359a08e0c7ae884a43f11b9ce5e9fe0b4d034877/examples/views/docs/component/amount.md#">千分位分隔符
::: snippet 设置has-separator显示分隔符
<template>
<div class="amount-demo">
<p><zui-amount :value="1234" has-separator ></zui-amount></p>
<p><zui-amount :value="-123456.123" has-separator></zui-amount></p>
</div>
</template>
<style>
.amount-demo p {
font-size: 24px;
}
</style>
:::
359a08e0c7ae884a43f11b9ce5e9fe0b4d034877/examples/views/docs/component/amount.md#">变化动效
::: snippet 设置transition使用动效，设置duration改变数字变化动画时长
<template>
<div class="amount-demo">
<p><zui-amount :value="val" :duration="800" transition></zui-amount></p>
</div>
</template>
<script>
export default {
data() {
return {
val: 1000,
};
},
mounted() {
setTimeout(() => {
this.val = 1500;
setTimeout(() => {
this.val = 500;
}, 2000);
}, 2000);
},
}
</script>
<style>
.amount-demo p {
font-size: 24px;
}
</style>
:::
359a08e0c7ae884a43f11b9ce5e9fe0b4d034877/examples/views/docs/component/amount.md#">大写中文
::: snippet 设置is-capital显示大写中文
<template>
<div class="amount-demo">
<p><zui-amount :value="1234" is-capital></zui-amount></p>
</div>
</template>
<style>
.amount-demo p {
font-size: 24px;
}
</style>
:::
359a08e0c7ae884a43f11b9ce5e9fe0b4d034877/examples/views/docs/component/amount.md#">前缀
::: snippet 设置prefix显示前缀，也可以通过prefix 插槽自定义前缀
<template>
<div class="amount-demo">
<p><zui-amount :value="1234" :precision="2" prefix="￥"></zui-amount></p>
<p><zui-amount :value="1234" :precision="3"><span slot="prefix" style="font-size: 12px">RMB</span></zui-amount></p>
</div>
</template>
<style>
.amount-demo p {
font-size: 24px;
}
</style>
:::
API
Attribute 属性
参数|说明|类型|默认值|备注 -|-|-|-|- value|数值|Number|0|- precision|数字精度|Number|2|小数点后保留几位 is-round-up|数字精度取舍是否四舍五入|Boolean|true|- has-separator|数字是否有千位分隔符|Boolean|false|- separator|数字千位分隔符|String|,|- is-capital|数字是否转换为大写中文|Boolean|false|- transition|数字变化是否使用动画|Boolean|false|- duration|数字变化动画时长|Number|1000|单位ms prefix|前缀|String|-|-