|
|
@ -1,24 +1,19 @@
|
|
|
|
// based on rc-resize-observer 0.1.3
|
|
|
|
// based on rc-resize-observer 0.1.3
|
|
|
|
import { defineComponent, PropType } from 'vue';
|
|
|
|
|
|
|
|
import ResizeObserver from 'resize-observer-polyfill';
|
|
|
|
import ResizeObserver from 'resize-observer-polyfill';
|
|
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
|
|
import { findDOMNode } from '../_util/props-util';
|
|
|
|
import { findDOMNode } from '../_util/props-util';
|
|
|
|
|
|
|
|
|
|
|
|
// Still need to be compatible with React 15, we use class component here
|
|
|
|
// Still need to be compatible with React 15, we use class component here
|
|
|
|
const VueResizeObserver = defineComponent({
|
|
|
|
const VueResizeObserver = {
|
|
|
|
name: 'ResizeObserver',
|
|
|
|
name: 'ResizeObserver',
|
|
|
|
mixins: [BaseMixin],
|
|
|
|
mixins: [BaseMixin],
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
disabled: Boolean,
|
|
|
|
disabled: Boolean,
|
|
|
|
onResize: Function as PropType<
|
|
|
|
onResize: Function,
|
|
|
|
(size: { width: number; height: number; offsetWidth: number; offsetHeight: number }) => void
|
|
|
|
|
|
|
|
>,
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
beforeCreate() {
|
|
|
|
data() {
|
|
|
|
this.currentElement = null;
|
|
|
|
this.currentElement = null;
|
|
|
|
this.resizeObserver = null;
|
|
|
|
this.resizeObserver = null;
|
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
width: 0,
|
|
|
|
width: 0,
|
|
|
|
height: 0,
|
|
|
|
height: 0,
|
|
|
@ -59,7 +54,7 @@ const VueResizeObserver = defineComponent({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
handleResize(entries: ResizeObserverEntry[]) {
|
|
|
|
handleResize(entries) {
|
|
|
|
const { target } = entries[0];
|
|
|
|
const { target } = entries[0];
|
|
|
|
const { width, height } = target.getBoundingClientRect();
|
|
|
|
const { width, height } = target.getBoundingClientRect();
|
|
|
|
/**
|
|
|
|
/**
|
|
|
@ -87,8 +82,8 @@ const VueResizeObserver = defineComponent({
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
return this.$slots.default?.()[0];
|
|
|
|
return this.$slots.default && this.$slots.default()[0];
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export default VueResizeObserver;
|
|
|
|
export default VueResizeObserver;
|