ant-design-vue/components/skeleton/Paragraph.jsx

39 lines
1.0 KiB
Vue
Raw Normal View History

2019-01-12 11:33:27 +08:00
import PropTypes from '../_util/vue-types';
2018-12-10 11:34:51 +08:00
2019-01-12 11:33:27 +08:00
const widthUnit = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
2018-12-10 11:34:51 +08:00
const skeletonParagraphProps = {
prefixCls: PropTypes.string,
2019-01-12 11:33:27 +08:00
width: PropTypes.oneOfType([widthUnit, PropTypes.arrayOf(widthUnit)]),
2018-12-10 11:34:51 +08:00
rows: PropTypes.number,
2019-01-12 11:33:27 +08:00
};
2018-12-10 11:34:51 +08:00
2019-01-12 11:33:27 +08:00
export const SkeletonParagraphProps = PropTypes.shape(skeletonParagraphProps);
2018-12-10 11:34:51 +08:00
const Paragraph = {
2019-03-18 20:35:24 +08:00
props: skeletonParagraphProps,
2018-12-10 11:34:51 +08:00
methods: {
2019-01-12 11:33:27 +08:00
getWidth(index) {
const { width, rows = 2 } = this;
2018-12-10 11:34:51 +08:00
if (Array.isArray(width)) {
2019-01-12 11:33:27 +08:00
return width[index];
2018-12-10 11:34:51 +08:00
}
// last paragraph
if (rows - 1 === index) {
2019-01-12 11:33:27 +08:00
return width;
2018-12-10 11:34:51 +08:00
}
2019-01-12 11:33:27 +08:00
return undefined;
2018-12-10 11:34:51 +08:00
},
},
2019-01-12 11:33:27 +08:00
render() {
const { prefixCls, rows } = this.$props;
2018-12-10 11:34:51 +08:00
const rowList = [...Array(rows)].map((_, index) => {
2019-01-12 11:33:27 +08:00
const width = this.getWidth(index);
return <li key={index} style={{ width: typeof width === 'number' ? `${width}px` : width }} />;
});
return <ul class={prefixCls}>{rowList}</ul>;
2018-12-10 11:34:51 +08:00
},
2019-01-12 11:33:27 +08:00
};
2018-12-10 11:34:51 +08:00
2019-01-12 11:33:27 +08:00
export default Paragraph;