Item.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  3. var __rest = this && this.__rest || function (s, e) {
  4. var t = {};
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  6. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  8. }
  9. return t;
  10. };
  11. import { computed, defineComponent, onUnmounted, ref } from 'vue';
  12. import ResizeObserver from '../vc-resize-observer';
  13. import classNames from '../_util/classNames';
  14. import PropTypes from '../_util/vue-types';
  15. const UNDEFINED = undefined;
  16. export default defineComponent({
  17. compatConfig: {
  18. MODE: 3
  19. },
  20. name: 'Item',
  21. props: {
  22. prefixCls: String,
  23. item: PropTypes.any,
  24. renderItem: Function,
  25. responsive: Boolean,
  26. itemKey: {
  27. type: [String, Number]
  28. },
  29. registerSize: Function,
  30. display: Boolean,
  31. order: Number,
  32. component: PropTypes.any,
  33. invalidate: Boolean
  34. },
  35. setup(props, _ref) {
  36. let {
  37. slots,
  38. expose
  39. } = _ref;
  40. const mergedHidden = computed(() => props.responsive && !props.display);
  41. const itemNodeRef = ref();
  42. expose({
  43. itemNodeRef
  44. });
  45. // ================================ Effect ================================
  46. function internalRegisterSize(width) {
  47. props.registerSize(props.itemKey, width);
  48. }
  49. onUnmounted(() => {
  50. internalRegisterSize(null);
  51. });
  52. return () => {
  53. var _a;
  54. const {
  55. prefixCls,
  56. invalidate,
  57. item,
  58. renderItem,
  59. responsive,
  60. registerSize,
  61. itemKey,
  62. display,
  63. order,
  64. component: Component = 'div'
  65. } = props,
  66. restProps = __rest(props, ["prefixCls", "invalidate", "item", "renderItem", "responsive", "registerSize", "itemKey", "display", "order", "component"]);
  67. const children = (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
  68. // ================================ Render ================================
  69. const childNode = renderItem && item !== UNDEFINED ? renderItem(item) : children;
  70. let overflowStyle;
  71. if (!invalidate) {
  72. overflowStyle = {
  73. opacity: mergedHidden.value ? 0 : 1,
  74. height: mergedHidden.value ? 0 : UNDEFINED,
  75. overflowY: mergedHidden.value ? 'hidden' : UNDEFINED,
  76. order: responsive ? order : UNDEFINED,
  77. pointerEvents: mergedHidden.value ? 'none' : UNDEFINED,
  78. position: mergedHidden.value ? 'absolute' : UNDEFINED
  79. };
  80. }
  81. const overflowProps = {};
  82. if (mergedHidden.value) {
  83. overflowProps['aria-hidden'] = true;
  84. }
  85. // 使用 disabled 避免结构不一致 导致子组件 rerender
  86. return _createVNode(ResizeObserver, {
  87. "disabled": !responsive,
  88. "onResize": _ref2 => {
  89. let {
  90. offsetWidth
  91. } = _ref2;
  92. internalRegisterSize(offsetWidth);
  93. }
  94. }, {
  95. default: () => _createVNode(Component, _objectSpread(_objectSpread(_objectSpread({
  96. "class": classNames(!invalidate && prefixCls),
  97. "style": overflowStyle
  98. }, overflowProps), restProps), {}, {
  99. "ref": itemNodeRef
  100. }), {
  101. default: () => [childNode]
  102. })
  103. });
  104. };
  105. }
  106. });