# Amount 金融数字

金融数字，一般用于金额，数量等。参考 <a href="https://didi.github.io/mand-mobile/#/zh-CN/docs/components/business/amount" target="_blank">Mand Mobile - Amount</a>

## 基础用法

::: snippet 设置`value`为基本数值，数值必须是`Number`类型

```html
<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`显示分隔符
```html
<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`改变数字变化动画时长
```html
<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`显示大写中文
```html
<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 插槽`自定义前缀
```html
<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|-|-