2021-06-26 09:35:40 +08:00
|
|
|
import type { ExtractPropTypes, PropType } from 'vue';
|
2021-06-07 17:35:03 +08:00
|
|
|
import {
|
|
|
|
defineComponent,
|
|
|
|
nextTick,
|
|
|
|
onActivated,
|
|
|
|
onBeforeUnmount,
|
|
|
|
onMounted,
|
|
|
|
reactive,
|
|
|
|
ref,
|
|
|
|
watch,
|
|
|
|
onDeactivated,
|
|
|
|
} from 'vue';
|
|
|
|
import VerticalAlignTopOutlined from '@ant-design/icons-vue/VerticalAlignTopOutlined';
|
2019-01-12 11:33:27 +08:00
|
|
|
import getScroll from '../_util/getScroll';
|
2020-10-22 22:45:21 +08:00
|
|
|
import { getTransitionProps, Transition } from '../_util/transition';
|
2020-03-07 19:45:13 +08:00
|
|
|
import scrollTo from '../_util/scrollTo';
|
2023-01-26 10:13:10 +08:00
|
|
|
import { withInstall, eventType } from '../_util/type';
|
2021-06-07 17:35:03 +08:00
|
|
|
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
|
2022-03-12 09:56:32 +08:00
|
|
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
2022-03-26 22:52:54 +08:00
|
|
|
import type { MouseEventHandler } from '../_util/EventInterface';
|
2023-01-26 10:13:10 +08:00
|
|
|
import useStyle from './style';
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2022-03-26 22:52:54 +08:00
|
|
|
export const backTopProps = () => ({
|
|
|
|
visibilityHeight: { type: Number, default: 400 },
|
|
|
|
duration: { type: Number, default: 450 },
|
2021-06-07 17:35:03 +08:00
|
|
|
target: Function as PropType<() => HTMLElement | Window | Document>,
|
2022-03-26 22:52:54 +08:00
|
|
|
prefixCls: String,
|
2023-01-26 10:13:10 +08:00
|
|
|
onClick: eventType<MouseEventHandler>(),
|
2022-03-26 22:52:54 +08:00
|
|
|
// visible: { type: Boolean, default: undefined }, // Only for test. Don't use it.
|
|
|
|
});
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2021-06-07 17:35:03 +08:00
|
|
|
export type BackTopProps = Partial<ExtractPropTypes<typeof backTopProps>>;
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2020-10-13 15:02:35 +08:00
|
|
|
const BackTop = defineComponent({
|
2022-09-26 21:33:41 +08:00
|
|
|
compatConfig: { MODE: 3 },
|
2018-04-08 21:17:20 +08:00
|
|
|
name: 'ABackTop',
|
2020-11-07 15:37:17 +08:00
|
|
|
inheritAttrs: false,
|
2022-03-26 22:52:54 +08:00
|
|
|
props: backTopProps(),
|
|
|
|
// emits: ['click'],
|
2021-06-07 17:35:03 +08:00
|
|
|
setup(props, { slots, attrs, emit }) {
|
2022-03-12 09:56:32 +08:00
|
|
|
const { prefixCls, direction } = useConfigInject('back-top', props);
|
2023-01-26 10:13:10 +08:00
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
2021-06-07 17:35:03 +08:00
|
|
|
const domRef = ref();
|
|
|
|
const state = reactive({
|
2018-03-05 19:05:23 +08:00
|
|
|
visible: false,
|
2020-10-13 15:02:35 +08:00
|
|
|
scrollEvent: null,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2021-06-07 17:35:03 +08:00
|
|
|
const getDefaultTarget = () =>
|
|
|
|
domRef.value && domRef.value.ownerDocument ? domRef.value.ownerDocument : window;
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2021-06-07 17:35:03 +08:00
|
|
|
const scrollToTop = (e: Event) => {
|
|
|
|
const { target = getDefaultTarget, duration } = props;
|
2020-03-07 19:45:13 +08:00
|
|
|
scrollTo(0, {
|
|
|
|
getContainer: target,
|
2021-06-07 17:35:03 +08:00
|
|
|
duration,
|
|
|
|
});
|
|
|
|
emit('click', e);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleScroll = throttleByAnimationFrame((e: Event | { target: any }) => {
|
|
|
|
const { visibilityHeight } = props;
|
|
|
|
const scrollTop = getScroll(e.target, true);
|
2023-01-26 10:13:10 +08:00
|
|
|
state.visible = scrollTop >= visibilityHeight;
|
2021-06-07 17:35:03 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
const bindScrollEvent = () => {
|
|
|
|
const { target } = props;
|
|
|
|
const getTarget = target || getDefaultTarget;
|
|
|
|
const container = getTarget();
|
2023-01-26 10:13:10 +08:00
|
|
|
handleScroll({ target: container });
|
|
|
|
container?.addEventListener('scroll', handleScroll);
|
2021-06-07 17:35:03 +08:00
|
|
|
};
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2021-06-07 17:35:03 +08:00
|
|
|
const scrollRemove = () => {
|
2023-01-26 10:13:10 +08:00
|
|
|
const { target } = props;
|
|
|
|
const getTarget = target || getDefaultTarget;
|
|
|
|
const container = getTarget();
|
|
|
|
handleScroll.cancel();
|
|
|
|
container?.removeEventListener('scroll', handleScroll);
|
2021-06-07 17:35:03 +08:00
|
|
|
};
|
2019-03-12 12:04:40 +08:00
|
|
|
|
2021-06-07 17:35:03 +08:00
|
|
|
watch(
|
|
|
|
() => props.target,
|
|
|
|
() => {
|
|
|
|
scrollRemove();
|
|
|
|
nextTick(() => {
|
|
|
|
bindScrollEvent();
|
|
|
|
});
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
);
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2021-06-07 17:35:03 +08:00
|
|
|
onMounted(() => {
|
|
|
|
nextTick(() => {
|
|
|
|
bindScrollEvent();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
onActivated(() => {
|
|
|
|
nextTick(() => {
|
|
|
|
bindScrollEvent();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
onDeactivated(() => {
|
|
|
|
scrollRemove();
|
|
|
|
});
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
scrollRemove();
|
|
|
|
});
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
const defaultElement = (
|
|
|
|
<div class={`${prefixCls.value}-content`}>
|
|
|
|
<div class={`${prefixCls.value}-icon`}>
|
|
|
|
<VerticalAlignTopOutlined />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
const divProps = {
|
|
|
|
...attrs,
|
|
|
|
onClick: scrollToTop,
|
|
|
|
class: {
|
2023-01-26 10:13:10 +08:00
|
|
|
[hashId.value]: true,
|
2021-06-07 17:35:03 +08:00
|
|
|
[`${prefixCls.value}`]: true,
|
|
|
|
[`${attrs.class}`]: attrs.class,
|
2022-03-12 09:56:32 +08:00
|
|
|
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
2021-06-07 17:35:03 +08:00
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const transitionProps = getTransitionProps('fade');
|
2023-01-26 10:13:10 +08:00
|
|
|
return wrapSSR(
|
2022-03-12 09:56:32 +08:00
|
|
|
<Transition {...transitionProps}>
|
|
|
|
<div v-show={state.visible} {...divProps} ref={domRef}>
|
|
|
|
{slots.default?.() || defaultElement}
|
|
|
|
</div>
|
2023-01-26 10:13:10 +08:00
|
|
|
</Transition>,
|
2022-03-12 09:56:32 +08:00
|
|
|
);
|
2021-06-07 17:35:03 +08:00
|
|
|
};
|
2018-03-05 19:05:23 +08:00
|
|
|
},
|
2020-10-13 15:02:35 +08:00
|
|
|
});
|
2018-03-05 19:05:23 +08:00
|
|
|
|
2020-11-01 15:03:33 +08:00
|
|
|
export default withInstall(BackTop);
|