refactor(v3/back-top): use composition api (#4060)
parent
dbbd07d62e
commit
5bcca46fff
|
@ -1,9 +0,0 @@
|
||||||
import PropTypes from '../_util/vue-types';
|
|
||||||
export default () => ({
|
|
||||||
visibilityHeight: PropTypes.number,
|
|
||||||
// onClick?: React.MouseEventHandler<any>;
|
|
||||||
target: PropTypes.func,
|
|
||||||
prefixCls: PropTypes.string,
|
|
||||||
onClick: PropTypes.func,
|
|
||||||
// visible: PropTypes.looseBool, // Only for test. Don't use it.
|
|
||||||
});
|
|
|
@ -1,10 +1,17 @@
|
||||||
import { defineComponent, inject, nextTick } from 'vue';
|
import {
|
||||||
|
defineComponent,
|
||||||
|
ExtractPropTypes,
|
||||||
|
inject,
|
||||||
|
nextTick,
|
||||||
|
onActivated,
|
||||||
|
onBeforeUnmount,
|
||||||
|
onMounted,
|
||||||
|
reactive,
|
||||||
|
} from 'vue';
|
||||||
import classNames from '../_util/classNames';
|
import classNames from '../_util/classNames';
|
||||||
import PropTypes from '../_util/vue-types';
|
import PropTypes from '../_util/vue-types';
|
||||||
import backTopTypes from './backTopTypes';
|
|
||||||
import addEventListener from '../vc-util/Dom/addEventListener';
|
import addEventListener from '../vc-util/Dom/addEventListener';
|
||||||
import getScroll from '../_util/getScroll';
|
import getScroll from '../_util/getScroll';
|
||||||
import BaseMixin from '../_util/BaseMixin';
|
|
||||||
import { getTransitionProps, Transition } from '../_util/transition';
|
import { getTransitionProps, Transition } from '../_util/transition';
|
||||||
import { defaultConfigProvider } from '../config-provider';
|
import { defaultConfigProvider } from '../config-provider';
|
||||||
import scrollTo from '../_util/scrollTo';
|
import scrollTo from '../_util/scrollTo';
|
||||||
|
@ -14,95 +21,91 @@ function getDefaultTarget() {
|
||||||
return window;
|
return window;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = backTopTypes();
|
export const backTopProps = {
|
||||||
|
// 滚动高度达到此参数值才出现 BackTop
|
||||||
|
visibilityHeight: PropTypes.number.def(400),
|
||||||
|
// 回到顶部所需时间(ms) @4.4.0
|
||||||
|
duration: PropTypes.number.def(450),
|
||||||
|
// 设置需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数
|
||||||
|
target: PropTypes.func,
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
onClick: PropTypes.func,
|
||||||
|
// visible: PropTypes.looseBool, // Only for test. Don't use it.
|
||||||
|
};
|
||||||
|
|
||||||
|
export type BackTopProps = Partial<ExtractPropTypes<typeof backTopProps>>;
|
||||||
|
|
||||||
const BackTop = defineComponent({
|
const BackTop = defineComponent({
|
||||||
name: 'ABackTop',
|
name: 'ABackTop',
|
||||||
mixins: [BaseMixin],
|
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
props: {
|
props: backTopProps,
|
||||||
...props,
|
|
||||||
visibilityHeight: PropTypes.number.def(400),
|
|
||||||
},
|
|
||||||
emits: ['click'],
|
emits: ['click'],
|
||||||
setup() {
|
setup(props, { slots, attrs, emit }) {
|
||||||
return {
|
const configProvider = inject('configProvider', defaultConfigProvider);
|
||||||
configProvider: inject('configProvider', defaultConfigProvider),
|
|
||||||
};
|
const state = reactive({
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
visible: false,
|
visible: false,
|
||||||
scrollEvent: null,
|
scrollEvent: null,
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
nextTick(() => {
|
|
||||||
const getTarget = this.target || getDefaultTarget;
|
|
||||||
this.scrollEvent = addEventListener(getTarget(), 'scroll', this.handleScroll);
|
|
||||||
this.handleScroll();
|
|
||||||
});
|
});
|
||||||
},
|
|
||||||
|
|
||||||
activated() {
|
const scrollToTop = (e: Event) => {
|
||||||
nextTick(() => {
|
const { target = getDefaultTarget, duration } = props;
|
||||||
this.handleScroll();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
if (this.scrollEvent) {
|
|
||||||
this.scrollEvent.remove();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getCurrentScrollTop() {
|
|
||||||
const getTarget = this.target || getDefaultTarget;
|
|
||||||
const targetNode = getTarget();
|
|
||||||
if (targetNode === window) {
|
|
||||||
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
|
|
||||||
}
|
|
||||||
return targetNode.scrollTop;
|
|
||||||
},
|
|
||||||
|
|
||||||
scrollToTop(e: Event) {
|
|
||||||
const { target = getDefaultTarget } = this;
|
|
||||||
scrollTo(0, {
|
scrollTo(0, {
|
||||||
getContainer: target,
|
getContainer: target,
|
||||||
|
duration,
|
||||||
});
|
});
|
||||||
this.$emit('click', e);
|
emit('click', e);
|
||||||
},
|
|
||||||
|
|
||||||
handleScroll() {
|
|
||||||
const { visibilityHeight, target = getDefaultTarget } = this;
|
|
||||||
const scrollTop = getScroll(target(), true);
|
|
||||||
this.setState({
|
|
||||||
visible: scrollTop > visibilityHeight,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { prefixCls: customizePrefixCls, $slots } = this;
|
|
||||||
|
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
|
||||||
const prefixCls = getPrefixCls('back-top', customizePrefixCls);
|
|
||||||
const classString = classNames(prefixCls, this.$attrs.class);
|
|
||||||
const defaultElement = (
|
|
||||||
<div class={`${prefixCls}-content`}>
|
|
||||||
<div class={`${prefixCls}-icon`} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
const divProps = {
|
|
||||||
...this.$attrs,
|
|
||||||
onClick: this.scrollToTop,
|
|
||||||
class: classString,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const backTopBtn = this.visible ? (
|
const handleScroll = () => {
|
||||||
<div {...divProps}>{$slots.default?.() || defaultElement}</div>
|
const { visibilityHeight, target = getDefaultTarget } = props;
|
||||||
) : null;
|
const scrollTop = getScroll(target(), true);
|
||||||
const transitionProps = getTransitionProps('fade');
|
state.visible = scrollTop > visibilityHeight;
|
||||||
return <Transition {...transitionProps}>{backTopBtn}</Transition>;
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
const getTarget = props.target || getDefaultTarget;
|
||||||
|
state.scrollEvent = addEventListener(getTarget(), 'scroll', handleScroll);
|
||||||
|
handleScroll();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
onActivated(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
handleScroll();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (state.scrollEvent) {
|
||||||
|
state.scrollEvent.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const { prefixCls: customizePrefixCls } = props;
|
||||||
|
|
||||||
|
const getPrefixCls = configProvider.getPrefixCls;
|
||||||
|
const prefixCls = getPrefixCls('back-top', customizePrefixCls);
|
||||||
|
const classString = classNames(prefixCls, attrs.class);
|
||||||
|
const defaultElement = (
|
||||||
|
<div class={`${prefixCls}-content`}>
|
||||||
|
<div class={`${prefixCls}-icon`} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
const divProps = {
|
||||||
|
...attrs,
|
||||||
|
onClick: scrollToTop,
|
||||||
|
class: classString,
|
||||||
|
};
|
||||||
|
|
||||||
|
const backTopBtn = state.visible ? (
|
||||||
|
<div {...divProps}>{slots.default?.() || defaultElement}</div>
|
||||||
|
) : null;
|
||||||
|
const transitionProps = getTransitionProps('fade');
|
||||||
|
return <Transition {...transitionProps}>{backTopBtn}</Transition>;
|
||||||
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,10 @@
|
||||||
height: 40px;
|
height: 40px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
Loading…
Reference in New Issue