frontend / zui

amount.md 2.54 KB

Amount 金融数字

金融数字，一般用于金额，数量等。参考 Mand Mobile - Amount

基础用法

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

:::

千分位分隔符

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

:::

变化动效

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

:::

大写中文

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

:::

前缀

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