perf: update affix

pull/2376/head
tanjinzhou 2020-06-15 18:25:44 +08:00
parent e2c86fe21e
commit 733c8fce8e
2 changed files with 12 additions and 7 deletions

View File

@ -131,7 +131,12 @@ const Affix = {
measure() { measure() {
const { status, lastAffix } = this; const { status, lastAffix } = this;
const { target } = this; const { target } = this;
if (status !== AffixStatus.Prepare || !this.$refs.fixedNode || !this.$el || !target) { if (
status !== AffixStatus.Prepare ||
!this.$refs.fixedNode ||
!this.$refs.placeholderNode ||
!target
) {
return; return;
} }
@ -147,7 +152,7 @@ const Affix = {
status: AffixStatus.None, status: AffixStatus.None,
}; };
const targetRect = getTargetRect(targetNode); const targetRect = getTargetRect(targetNode);
const placeholderReact = getTargetRect(this.$el); const placeholderReact = getTargetRect(this.$refs.placeholderNode);
const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop); const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom); const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
if (fixedTop !== undefined) { if (fixedTop !== undefined) {
@ -209,9 +214,9 @@ const Affix = {
const offsetBottom = this.getOffsetBottom(); const offsetBottom = this.getOffsetBottom();
const targetNode = target(); const targetNode = target();
if (targetNode && this.$el) { if (targetNode && this.$refs.placeholderNode) {
const targetRect = getTargetRect(targetNode); const targetRect = getTargetRect(targetNode);
const placeholderReact = getTargetRect(this.$el); const placeholderReact = getTargetRect(this.$refs.placeholderNode);
const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop); const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom); const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
@ -234,7 +239,6 @@ const Affix = {
const className = classNames({ const className = classNames({
[getPrefixCls('affix', prefixCls)]: affixStyle, [getPrefixCls('affix', prefixCls)]: affixStyle,
}); });
const props = omit($props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']); const props = omit($props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);
return ( return (
<ResizeObserver <ResizeObserver

View File

@ -6,6 +6,7 @@ const VueResizeObserver = {
name: 'ResizeObserver', name: 'ResizeObserver',
props: { props: {
disabled: Boolean, disabled: Boolean,
onResize: Function,
}, },
data() { data() {
this.currentElement = null; this.currentElement = null;
@ -45,12 +46,12 @@ const VueResizeObserver = {
} }
if (!this.resizeObserver && element) { if (!this.resizeObserver && element) {
this.resizeObserver = new ResizeObserver(this.onResize); this.resizeObserver = new ResizeObserver(this.handleResize);
this.resizeObserver.observe(element); this.resizeObserver.observe(element);
} }
}, },
onResize(entries) { handleResize(entries) {
const { target } = entries[0]; const { target } = entries[0];
const { width, height } = target.getBoundingClientRect(); const { width, height } = target.getBoundingClientRect();
/** /**