ant-design-vue/components/statistic/Number.jsx

49 lines
1.3 KiB
Vue
Raw Normal View History

2019-05-25 09:18:04 +00:00
import padEnd from 'lodash/padEnd';
import { createVNode } from 'vue';
2019-05-25 09:18:04 +00:00
2020-06-22 09:56:03 +00:00
const Number = (_, { attrs }) => {
const { value, formatter, precision, decimalSeparator, groupSeparator = '', prefixCls } = attrs;
let valueNode;
2019-05-25 09:18:04 +00:00
if (typeof formatter === 'function') {
// Customize formatter
valueNode = formatter({ value, h: createVNode });
} else {
// Internal formatter
const val = String(value);
const cells = val.match(/^(-?)(\d*)(\.(\d+))?$/);
// Process if illegal number
if (!cells) {
valueNode = val;
2019-05-25 09:18:04 +00:00
} else {
const negative = cells[1];
let int = cells[2] || '0';
let decimal = cells[4] || '';
2019-05-25 09:18:04 +00:00
int = int.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator);
if (typeof precision === 'number') {
decimal = padEnd(decimal, precision, '0').slice(0, precision);
}
2019-05-25 09:18:04 +00:00
if (decimal) {
decimal = `${decimalSeparator}${decimal}`;
2019-05-25 09:18:04 +00:00
}
valueNode = [
<span key="int" class={`${prefixCls}-content-value-int`}>
{negative}
{int}
</span>,
decimal && (
<span key="decimal" class={`${prefixCls}-content-value-decimal`}>
{decimal}
</span>
),
];
2019-05-25 09:18:04 +00:00
}
}
2019-05-25 09:18:04 +00:00
return <span class={`${prefixCls}-content-value`}>{valueNode}</span>;
2019-05-25 09:18:04 +00:00
};
2020-06-22 09:56:03 +00:00
export default Number;