---
title: WKAmount 货币数字
group:
  title: 展示组件
  path: /show/
---

## 何时使用

WKAmount 主要为了方便显示金额而设计的组件，内置了金额转换函数，无需手动转换金额

- 在需要显示金额信息时
- 在需要显示数字时

## 如何使用内置功能

- 目前我们后端返回的金额都是以分为单位的，需要转换为元。只需要 isPoint 为 true,默认值为 true
- 改组件支持千位分隔（默认','），支持小数点分隔符（默认'.'）
- 该组件提供了多个插槽，如数字前的货币符合插槽（previousUnit）、数字后的货币单位插槽(backUnit)
- unitFontSize 这个字体大小会同时更改货币符合插槽（previousUnit）、数字后的货币单位插槽(backUnit)内容字体大小

下面介绍一些常用的场景

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import { View, WKAmount } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

const titleStyle: React.CSSProperties = {
  marginTop: '10px',
};

const format = (value: string | number) => {
  if (typeof value === 'string') {
    return parseInt(value) / 100;
  }
  return value / 100;
};

export default () => {
  return (
    <PageWrapper title="基本使用">
      <View style={{ display: 'flex', flexDirection: 'column', marginLeft: '10px' }}>
        <WKAmount value="100000000" />
        <View style={titleStyle}>不需要调用分转元函数</View>
        <WKAmount value="100000000" isPoint={false} />
        <View style={titleStyle}>自定义转换函数</View>
        <WKAmount value="100000000" format={(value: string | number) => format(value)} />
        <View style={titleStyle}>标价</View>
        <WKAmount value="100000000" style={{ textDecoration: 'line-through' }} />
        <View style={titleStyle}>自定义字体颜色</View>
        <WKAmount style={{ color: 'orange' }} value="100000000" />
      </View>
    </PageWrapper>
  );
};
```

## 使用插槽

```tsx
import React from 'react';
import { View, WKAmount } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

const titleStyle: React.CSSProperties = {
  marginTop: '10px',
};

export default () => {
  return (
    <PageWrapper title="使用插槽">
      <View style={{ display: 'flex', flexDirection: 'column', marginLeft: '10px' }}>
        <View style={titleStyle}>货币符合插槽</View>
        <WKAmount value="1000" previousUnit="$" />
        <View style={titleStyle}>货币单位插槽</View>
        <WKAmount value="1000" backUnit="万元" />
      </View>
    </PageWrapper>
  );
};
```

## 余额中心使用

```tsx
import React from 'react';
import { View, WKAmount } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

const titleStyle: React.CSSProperties = {
  marginTop: '10px',
};

export default () => {
  return (
    <PageWrapper title="余额中心使用">
      <View style={{ display: 'flex', flexDirection: 'column', marginLeft: '10px' }}>
        <View style={titleStyle}>整数部分字体大于其他部分</View>
        <WKAmount value="1000" previousUnit="$" integerStyle={{ fontSize: '30px' }} />
        <View style={titleStyle}>自定义前后单位且数字部分字体大于其他部分</View>
        <WKAmount
          value="999987"
          integerStyle={{ fontSize: '30px' }}
          previousUnit={<View className="unit">￥</View>}
          backUnit={'元'}
        />
      </View>
    </PageWrapper>
  );
};
```

## 自定义千位分隔符

```tsx
import React from 'react';
import { View, WKAmount } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
const titleStyle: React.CSSProperties = {
  marginTop: '10px',
};

export default () => {
  return (
    <PageWrapper title="自定义千位分隔符">
      <View style={{ display: 'flex', flexDirection: 'column', marginLeft: '10px' }}>
        <View style={titleStyle}>自定义千位分隔符和小数分隔符</View>
        <WKAmount value="100000000" decimal="'" thousand='"' />
      </View>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKAmount/index.d.ts'></API>
