index.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import ResizeObserver from 'resize-observer-polyfill';
  4. import { defineComponent, getCurrentInstance, onMounted, onUnmounted, onUpdated, reactive, watch } from 'vue';
  5. import { findDOMNode } from '../_util/props-util';
  6. export default defineComponent({
  7. compatConfig: {
  8. MODE: 3
  9. },
  10. name: 'ResizeObserver',
  11. props: {
  12. disabled: Boolean,
  13. onResize: Function
  14. },
  15. emits: ['resize'],
  16. setup: function setup(props, _ref) {
  17. var slots = _ref.slots;
  18. var state = reactive({
  19. width: 0,
  20. height: 0,
  21. offsetHeight: 0,
  22. offsetWidth: 0
  23. });
  24. var currentElement = null;
  25. var resizeObserver = null;
  26. var destroyObserver = function destroyObserver() {
  27. if (resizeObserver) {
  28. resizeObserver.disconnect();
  29. resizeObserver = null;
  30. }
  31. };
  32. var onResize = function onResize(entries) {
  33. var onResize = props.onResize;
  34. var target = entries[0].target;
  35. var _target$getBoundingCl = target.getBoundingClientRect(),
  36. width = _target$getBoundingCl.width,
  37. height = _target$getBoundingCl.height;
  38. var offsetWidth = target.offsetWidth,
  39. offsetHeight = target.offsetHeight;
  40. /**
  41. * Resize observer trigger when content size changed.
  42. * In most case we just care about element size,
  43. * let's use `boundary` instead of `contentRect` here to avoid shaking.
  44. */
  45. var fixedWidth = Math.floor(width);
  46. var fixedHeight = Math.floor(height);
  47. if (state.width !== fixedWidth || state.height !== fixedHeight || state.offsetWidth !== offsetWidth || state.offsetHeight !== offsetHeight) {
  48. var size = {
  49. width: fixedWidth,
  50. height: fixedHeight,
  51. offsetWidth: offsetWidth,
  52. offsetHeight: offsetHeight
  53. };
  54. _extends(state, size);
  55. if (onResize) {
  56. // defer the callback but not defer to next frame
  57. Promise.resolve().then(function () {
  58. onResize(_objectSpread(_objectSpread({}, size), {}, {
  59. offsetWidth: offsetWidth,
  60. offsetHeight: offsetHeight
  61. }), target);
  62. });
  63. }
  64. }
  65. };
  66. var instance = getCurrentInstance();
  67. var registerObserver = function registerObserver() {
  68. var disabled = props.disabled;
  69. // Unregister if disabled
  70. if (disabled) {
  71. destroyObserver();
  72. return;
  73. }
  74. // Unregister if element changed
  75. var element = findDOMNode(instance);
  76. var elementChanged = element !== currentElement;
  77. if (elementChanged) {
  78. destroyObserver();
  79. currentElement = element;
  80. }
  81. if (!resizeObserver && element) {
  82. resizeObserver = new ResizeObserver(onResize);
  83. resizeObserver.observe(element);
  84. }
  85. };
  86. onMounted(function () {
  87. registerObserver();
  88. });
  89. onUpdated(function () {
  90. registerObserver();
  91. });
  92. onUnmounted(function () {
  93. destroyObserver();
  94. });
  95. watch(function () {
  96. return props.disabled;
  97. }, function () {
  98. registerObserver();
  99. }, {
  100. flush: 'post'
  101. });
  102. return function () {
  103. var _slots$default;
  104. return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)[0];
  105. };
  106. }
  107. });