github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

perf: affix

pull/3501/head
tanjinzhou 2021-01-07 16:03:41 +08:00
parent ea2d8e2ecd
commit 61f087ac2a
1 changed files with 16 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
components/affix/index.tsx
View File

@ -7,16 +7,16 @@ import {
watch, watch,
onMounted, onMounted,
getCurrentInstance, getCurrentInstance,
computed,
onUnmounted, onUnmounted,
onUpdated,
} from 'vue'; } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import omit from 'omit.js'; import omit from 'omit.js';
import ResizeObserver from '../vc-resize-observer'; import ResizeObserver from '../vc-resize-observer';
// import BaseMixin from '../_util/BaseMixin';
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
import { defaultConfigProvider } from '../config-provider'; import { defaultConfigProvider } from '../config-provider';
import warning from '../_util/warning';
import { withInstall } from '../_util/type'; import { withInstall } from '../_util/type';
import { import {
addObserveTarget, addObserveTarget,
@ -76,26 +76,12 @@ const Affix = defineComponent({
}); });
const currentInstance = getCurrentInstance(); const currentInstance = getCurrentInstance();
const getOffsetTop = () => { const offsetTop = computed(() => {
const { offset, offsetBottom } = props; return props.offsetBottom === undefined && props.offsetTop === undefined
let { offsetTop } = props; ? 0
if (offsetTop === undefined) { : props.offsetTop;
offsetTop = offset; });
warning( const offsetBottom = computed(() => props.offsetBottom);
offset === undefined,
'Affix',
'`offset` is deprecated. Please use `offsetTop` instead.',
);
}
if (offsetBottom === undefined && offsetTop === undefined) {
offsetTop = 0;
}
return offsetTop;
};
const getOffsetBottom = () => {
return props.offsetBottom;
};
const measure = () => { const measure = () => {
const { status, lastAffix } = state; const { status, lastAffix } = state;
const { target } = props; const { target } = props;
@ -103,9 +89,6 @@ const Affix = defineComponent({
return; return;
} }
const offsetTop = getOffsetTop();
const offsetBottom = getOffsetBottom();
const targetNode = target(); const targetNode = target();
if (!targetNode) { if (!targetNode) {
return; return;
@ -116,8 +99,8 @@ const Affix = defineComponent({
} as AffixState; } as AffixState;
const targetRect = getTargetRect(targetNode); const targetRect = getTargetRect(targetNode);
const placeholderReact = getTargetRect(placeholderNode.value as HTMLElement); const placeholderReact = getTargetRect(placeholderNode.value as HTMLElement);
const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop); const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop.value);
const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom); const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom.value);
if (fixedTop !== undefined) { if (fixedTop !== undefined) {
newState.affixStyle = { newState.affixStyle = {
position: 'fixed', position: 'fixed',
@ -155,6 +138,7 @@ const Affix = defineComponent({
affixStyle: undefined, affixStyle: undefined,
placeholderStyle: undefined, placeholderStyle: undefined,
}); });
currentInstance.update();
// Test if `updatePosition` called // Test if `updatePosition` called
if (process.env.NODE_ENV === 'test') { if (process.env.NODE_ENV === 'test') {
emit('testUpdatePosition'); emit('testUpdatePosition');
@ -170,16 +154,12 @@ const Affix = defineComponent({
// Check position change before measure to make Safari smooth // Check position change before measure to make Safari smooth
if (target && affixStyle) { if (target && affixStyle) {
const offsetTop = getOffsetTop();
const offsetBottom = getOffsetBottom();
const targetNode = target(); const targetNode = target();
if (targetNode && placeholderNode.value) { if (targetNode && placeholderNode.value) {
const targetRect = getTargetRect(targetNode); const targetRect = getTargetRect(targetNode);
const placeholderReact = getTargetRect(placeholderNode.value as HTMLElement); const placeholderReact = getTargetRect(placeholderNode.value as HTMLElement);
const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop); const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop.value);
const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom); const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom.value);
if ( if (
(fixedTop !== undefined && affixStyle.top === fixedTop) || (fixedTop !== undefined && affixStyle.top === fixedTop) ||
(fixedBottom !== undefined && affixStyle.bottom === fixedBottom) (fixedBottom !== undefined && affixStyle.bottom === fixedBottom)
@ -215,13 +195,6 @@ const Affix = defineComponent({
}, },
); );
watch(() => [props.offsetTop, props.offsetBottom], updatePosition); watch(() => [props.offsetTop, props.offsetBottom], updatePosition);
watch(
() => state.status,
() => {
measure();
},
);
onMounted(() => { onMounted(() => {
const { target } = props; const { target } = props;
if (target) { if (target) {
@ -234,7 +207,9 @@ const Affix = defineComponent({
}); });
} }
}); });
onUpdated(() => {
measure();
});
onUnmounted(() => { onUnmounted(() => {
clearTimeout(state.timeout); clearTimeout(state.timeout);
removeObserveTarget(currentInstance); removeObserveTarget(currentInstance);