refactor(v3/back-top): use composition api (#4060)

components/back-top/backTopTypes.ts

@@ -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.
-});

components/back-top/index.tsx

@@ -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 PropTypes from '../_util/vue-types';
-import backTopTypes from './backTopTypes';
 import addEventListener from '../vc-util/Dom/addEventListener';
 import getScroll from '../_util/getScroll';
-import BaseMixin from '../_util/BaseMixin';
 import { getTransitionProps, Transition } from '../_util/transition';
 import { defaultConfigProvider } from '../config-provider';
 import scrollTo from '../_util/scrollTo';
@@ -14,95 +21,91 @@ function getDefaultTarget() {
   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({
   name: 'ABackTop',
-  mixins: [BaseMixin],
   inheritAttrs: false,
-  props: {
+  props: backTopProps,
-    ...props,
-    visibilityHeight: PropTypes.number.def(400),
-  },
   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,
       scrollEvent: null,
+    });
+
+    const scrollToTop = (e: Event) => {
+      const { target = getDefaultTarget, duration } = props;
+      scrollTo(0, {
+        getContainer: target,
+        duration,
+      });
+      emit('click', e);
     };
-  },
+
-  mounted() {
+    const handleScroll = () => {
+      const { visibilityHeight, target = getDefaultTarget } = props;
+      const scrollTop = getScroll(target(), true);
+      state.visible = scrollTop > visibilityHeight;
+    };
+
+    onMounted(() => {
       nextTick(() => {
-      const getTarget = this.target || getDefaultTarget;
+        const getTarget = props.target || getDefaultTarget;
-      this.scrollEvent = addEventListener(getTarget(), 'scroll', this.handleScroll);
+        state.scrollEvent = addEventListener(getTarget(), 'scroll', handleScroll);
-      this.handleScroll();
+        handleScroll();
+      });
     });
-  },
 
-  activated() {
+    onActivated(() => {
       nextTick(() => {
-      this.handleScroll();
+        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, {
-        getContainer: target,
     });
-      this.$emit('click', e);
-    },
 
-    handleScroll() {
+    onBeforeUnmount(() => {
-      const { visibilityHeight, target = getDefaultTarget } = this;
+      if (state.scrollEvent) {
-      const scrollTop = getScroll(target(), true);
+        state.scrollEvent.remove();
-      this.setState({
+      }
-        visible: scrollTop > visibilityHeight,
     });
-    },
-  },
 
-  render() {
+    return () => {
-    const { prefixCls: customizePrefixCls, $slots } = this;
+      const { prefixCls: customizePrefixCls } = props;
 
-    const getPrefixCls = this.configProvider.getPrefixCls;
+      const getPrefixCls = configProvider.getPrefixCls;
       const prefixCls = getPrefixCls('back-top', customizePrefixCls);
-    const classString = classNames(prefixCls, this.$attrs.class);
+      const classString = classNames(prefixCls, attrs.class);
       const defaultElement = (
         <div class={`${prefixCls}-content`}>
           <div class={`${prefixCls}-icon`} />
         </div>
       );
       const divProps = {
-      ...this.$attrs,
+        ...attrs,
-      onClick: this.scrollToTop,
+        onClick: scrollToTop,
         class: classString,
       };
 
-    const backTopBtn = this.visible ? (
+      const backTopBtn = state.visible ? (
-      <div {...divProps}>{$slots.default?.() || defaultElement}</div>
+        <div {...divProps}>{slots.default?.() || defaultElement}</div>
       ) : null;
       const transitionProps = getTransitionProps('fade');
       return <Transition {...transitionProps}>{backTopBtn}</Transition>;
+    };
   },
 });
 

components/back-top/style/index.less

@@ -14,6 +14,10 @@
   height: 40px;
   cursor: pointer;
 
+  &:empty {
+    display: none;
+  }
+
   &-content {
     width: 40px;
     height: 40px;