fix: add resize-observer-polyfill #4508

close #4508

Author: tangjinzhou

components/vc-align/util.ts

@@ -1,5 +1,6 @@
 import contains from '../vc-util/Dom/contains';
 import type { TargetPoint } from './interface';
+import ResizeObserver from 'resize-observer-polyfill';
 
 export function isSamePoint(prev: TargetPoint, next: TargetPoint) {
   if (prev === next) return true;

components/vc-resize-observer/index.tsx

@@ -1,5 +1,6 @@
 // based on rc-resize-observer 1.0.0
 import type { PropType } from 'vue';
+import ResizeObserver from 'resize-observer-polyfill';
 import {
   defineComponent,
   getCurrentInstance,
@@ -18,7 +19,7 @@ interface ResizeObserverState {
   offsetWidth: number;
 }
 
-const ResizeObserver = defineComponent({
+export default defineComponent({
   name: 'ResizeObserver',
   props: {
     disabled: Boolean,
@@ -110,7 +111,7 @@ const ResizeObserver = defineComponent({
       }
 
       if (!resizeObserver && element) {
-        resizeObserver = new window.ResizeObserver(onResize);
+        resizeObserver = new ResizeObserver(onResize);
         resizeObserver.observe(element);
       }
     };
@@ -135,5 +136,3 @@ const ResizeObserver = defineComponent({
     };
   },
 });
-
-export default ResizeObserver;

components/vc-slick/src/inner-slider.js

@@ -1,4 +1,5 @@
 import debounce from 'lodash-es/debounce';
+import ResizeObserver from 'resize-observer-polyfill';
 import classnames from '../../_util/classNames';
 import BaseMixin from '../../_util/BaseMixin';
 import defaultProps from './default-props';

components/vc-tabs/src/ScrollableTabBarNode.jsx

@@ -1,4 +1,5 @@
 import debounce from 'lodash-es/debounce';
+import ResizeObserver from 'resize-observer-polyfill';
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
 import { getComponent, getSlot } from '../../_util/props-util';

package.json

@@ -160,7 +160,6 @@
     "querystring": "^0.2.0",
     "raw-loader": "^4.0.2",
     "reqwest": "^2.0.5",
-    "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.0",
     "rucksack-css": "^1.0.2",
     "selenium-server": "^3.0.1",
@@ -214,6 +213,7 @@
     "lodash-es": "^4.17.15",
     "moment": "^2.27.0",
     "omit.js": "^2.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "scroll-into-view-if-needed": "^2.2.25",
     "shallow-equal": "^1.0.0",
     "vue-types": "^3.0.0",