0.0.2 • Published 2 years ago
numeral-rc v0.0.2
numeral-react
Getting Started
Install dependencies,
$ npm i numeral-rc
or
$ yarn add numeral-rc
API
Demo:
import { Card, Modal, Table, Tag } from 'antd';
import React, { useState } from 'react';
import { Numeral } from 'numeral-react';
import 'antd/dist/antd.css';
export default () => {
const columns = [
{
title: '商品',
align: 'left',
dataIndex: 'name',
},
{
title: '数量',
align: 'right',
dataIndex: 'numbers',
render: (text) => <Numeral.Thousand value={text} />,
},
{
title: '金额',
dataIndex: 'money',
align: 'right',
render: (text) => <Numeral value={text} unit="元" />,
},
];
const columns2 = [
{
title: '商品',
align: 'left',
dataIndex: 'name',
},
{
title: '数量',
align: 'right',
dataIndex: 'numbers',
render: (text) => <Numeral type="thousand" unit="件" value={text} />,
},
{
title: '金额',
dataIndex: 'money',
align: 'right',
render: (text) => <Numeral.TT value={text} unit="万元" />,
},
];
const columns3 = [
{
title: '商品',
align: 'left',
dataIndex: 'name',
},
{
title: '数量',
align: 'right',
dataIndex: 'numbers',
render: (text) => <Numeral.Thousand value={text} />,
},
{
title: '金额',
dataIndex: 'money',
align: 'right',
render: (text) => (
<Numeral.Defined
render={(currency, value, unit) => (
<div>
<Tag color="cyan">{`${currency}${value}${unit}`}</Tag>
</div>
)}
decimals={3}
value={text}
unit="美元"
currency="$"
/>
),
},
];
const columns4 = [
{
title: '商品',
align: 'left',
dataIndex: 'name',
},
{
title: '数量',
align: 'right',
dataIndex: 'numbers',
render: (text) => <Numeral.Thousand value={text} />,
},
{
title: '金额',
dataIndex: 'money',
align: 'right',
render: (text) => <Numeral.Defined decimals={3} value={text} unit="" />,
},
];
const columns5 = [
{
title: '商品',
align: 'left',
dataIndex: 'name',
},
{
title: '数量',
align: 'right',
dataIndex: 'numbers',
render: (text) => <div>{Numeral.numberValue(text, 0, 1)}</div>,
},
{
title: '金额',
dataIndex: 'money',
align: 'right',
render: (text) => <div>{Numeral.numberValue(text, 2, 1)}</div>,
},
];
const dataArray = () => {
const data = [];
for (let i = 0; i < 1; i++) {
data.push({
key: i,
name: `产品 ${i}`,
numbers: 1000,
money: 23004.34,
});
}
return data;
};
return (
<>
<Card>
<h3>普通的金额格式化 例如:2000 -- 2,000.00 </h3>
<Table pagination={false} columns={columns} dataSource={dataArray()} />
</Card>
<Card>
<h3>格式转行为万元 例如:20000 -- 2.000000</h3>
<Table pagination={false} columns={columns2} dataSource={dataArray()} />
</Card>
<Card>
<h3>格式自定义 需要转为保留3位小数 使用render自定义渲染 </h3>
<Table pagination={false} columns={columns3} dataSource={dataArray()} />
</Card>
<Card>
<h3>错误格式数据-原始数据返回 ***金额=fds-9383</h3>
<Table
pagination={false}
columns={columns4}
dataSource={[
{
key: 333,
name: `产品 ${0}`,
numbers: Math.floor(Math.random() * 100000),
money: 'fds-9383',
},
]}
/>
</Card>
<Card>
<h3>不直接使用Numeral组件 使用Numeral.numberValue转换</h3>
<Table
pagination={false}
columns={columns5}
dataSource={[
{
key: 333,
name: `产品 ${0}`,
numbers: Math.floor(Math.random() * 100000),
money: '1000',
},
]}
/>
</Card>
<Card>
<h3>¥200034.12 => ¥{Numeral.numberMoneyToChinese(200034.12)}</h3>
</Card>
</>
);
};