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

65 lines
2.0 KiB
Vue
Raw Normal View History

2019-05-25 09:18:04 +00:00
import PropTypes from '../_util/vue-types';
import { getComponentFromProp, initDefaultProps } from '../_util/props-util';
2019-05-25 14:43:44 +00:00
import { ConfigConsumerProps } from '../config-provider';
2019-05-25 09:18:04 +00:00
import StatisticNumber from './Number';
export const StatisticProps = {
prefixCls: PropTypes.string,
decimalSeparator: PropTypes.string,
groupSeparator: PropTypes.string,
format: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
valueStyle: PropTypes.any,
valueRender: PropTypes.any,
formatter: PropTypes.any,
precision: PropTypes.number,
prefix: PropTypes.any,
suffix: PropTypes.any,
title: PropTypes.any,
};
export default {
name: 'AStatistic',
props: initDefaultProps(StatisticProps, {
prefixCls: 'ant-statistic',
decimalSeparator: '.',
groupSeparator: ',',
}),
2019-05-25 14:43:44 +00:00
inject: {
configProvider: { default: () => ({}) },
},
2019-05-25 09:18:04 +00:00
render() {
2019-05-25 14:43:44 +00:00
const {
prefixCls: customizePrefixCls,
value = 0,
valueStyle,
valueRender,
} = this.$props;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('statistic', customizePrefixCls);
2019-05-25 09:18:04 +00:00
const title = getComponentFromProp(this, 'title');
let prefix = getComponentFromProp(this, 'prefix');
let suffix = getComponentFromProp(this, 'suffix');
const formatter = getComponentFromProp(this, 'formatter');
let valueNode = (
<StatisticNumber {...{ props: this.$props }} value={value} formatter={formatter} />
);
if (valueRender) {
valueNode = valueRender(valueNode);
}
return (
<div class={prefixCls}>
{title && <div class={`${prefixCls}-title`}>{title}</div>}
<div style={valueStyle} class={`${prefixCls}-content`}>
{prefix && <span class={`${prefixCls}-content-prefix`}>{prefix}</span>}
{valueNode}
{suffix && <span class={`${prefixCls}-content-suffix`}>{suffix}</span>}
</div>
</div>
);
},
};