Paragraph.js 1.3 KB

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