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,
-    visibilityHeight: PropTypes.number.def(400),
-  },
+  props: backTopProps,
   emits: ['click'],
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
-  data() {
-    return {
+  setup(props, { slots, attrs, emit }) {
+    const configProvider = inject('configProvider', defaultConfigProvider);
+
+    const state = reactive({
       visible: false,
       scrollEvent: null,
-    };
-  },
-  mounted() {
-    nextTick(() => {
-      const getTarget = this.target || getDefaultTarget;
-      this.scrollEvent = addEventListener(getTarget(), 'scroll', this.handleScroll);
-      this.handleScroll();
     });
-  },
 
-  activated() {
-    nextTick(() => {
-      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;
+    const scrollToTop = (e: Event) => {
+      const { target = getDefaultTarget, duration } = props;
       scrollTo(0, {
         getContainer: target,
+        duration,
       });
-      this.$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,
+      emit('click', e);
     };
 
-    const backTopBtn = this.visible ? (
-      <div {...divProps}>{$slots.default?.() || defaultElement}</div>
-    ) : null;
-    const transitionProps = getTransitionProps('fade');
-    return <Transition {...transitionProps}>{backTopBtn}</Transition>;
+    const handleScroll = () => {
+      const { visibilityHeight, target = getDefaultTarget } = props;
+      const scrollTop = getScroll(target(), true);
+      state.visible = scrollTop > visibilityHeight;
+    };
+
+    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>;
+    };
   },
 });
 

components/back-top/style/index.less

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