Paragraph.js 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import { createVNode as _createVNode } from "vue";
  2. import { defineComponent } from 'vue';
  3. export const skeletonParagraphProps = () => ({
  4. prefixCls: String,
  5. width: {
  6. type: [Number, String, Array]
  7. },
  8. rows: Number
  9. });
  10. const SkeletonParagraph = defineComponent({
  11. compatConfig: {
  12. MODE: 3
  13. },
  14. name: 'SkeletonParagraph',
  15. props: skeletonParagraphProps(),
  16. setup(props) {
  17. const getWidth = index => {
  18. const {
  19. width,
  20. rows = 2
  21. } = props;
  22. if (Array.isArray(width)) {
  23. return width[index];
  24. }
  25. // last paragraph
  26. if (rows - 1 === index) {
  27. return width;
  28. }
  29. return undefined;
  30. };
  31. return () => {
  32. const {
  33. prefixCls,
  34. rows
  35. } = props;
  36. const rowList = [...Array(rows)].map((_, index) => {
  37. const width = getWidth(index);
  38. return _createVNode("li", {
  39. "key": index,
  40. "style": {
  41. width: typeof width === 'number' ? `${width}px` : width
  42. }
  43. }, null);
  44. });
  45. return _createVNode("ul", {
  46. "class": prefixCls
  47. }, [rowList]);
  48. };
  49. }
  50. });
  51. export default SkeletonParagraph;