Item.js 3.6 KB

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