ant-design-vue/components/skeleton/Paragraph.jsx
2018-12-10 11:34:51 +08:00

54 lines
1.2 KiB
Vue

import PropTypes from '../_util/vue-types'
import { initDefaultProps } from '../_util/props-util'
const widthUnit = PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
])
const skeletonParagraphProps = {
prefixCls: PropTypes.string,
width: PropTypes.oneOfType([
widthUnit,
PropTypes.arrayOf(widthUnit),
]),
rows: PropTypes.number,
}
export const SkeletonParagraphProps = PropTypes.shape(skeletonParagraphProps)
const Paragraph = {
props: initDefaultProps(skeletonParagraphProps, {
prefixCls: 'ant-skeleton-paragraph',
}),
methods: {
getWidth (index) {
const { width, rows = 2 } = this
if (Array.isArray(width)) {
return width[index]
}
// last paragraph
if (rows - 1 === index) {
return width
}
return undefined
},
},
render () {
const { prefixCls, rows } = this.$props
const rowList = [...Array(rows)].map((_, index) => {
const width = this.getWidth(index)
return <li key={index} style={{ width: typeof width === 'number' ? `${width}px` : width }} />
})
return (
<ul
class={prefixCls}
>
{rowList}
</ul>
)
},
}
export default Paragraph