feat: update BackTop

Author: liulinboyi

components/back-top/backTopTypes.js

@@ -0,0 +1,9 @@
+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.bool, // Only for test. Don't use it.
+});

components/back-top/index.jsx

@@ -1,34 +1,30 @@
 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 from '../_util/getTransitionProps';
 import { ConfigConsumerProps } from '../config-provider';
-import Base from '../base';
-import { getListeners } from '../_util/props-util';
 import scrollTo from '../_util/scrollTo';
+import { inject } from 'vue';
 
 function getDefaultTarget() {
   return window;
 }
 
-const BackTopProps = {
-  visibilityHeight: PropTypes.number,
-  // onClick?: React.MouseEventHandler<any>;
-  target: PropTypes.func,
-  prefixCls: PropTypes.string,
-  // visible: PropTypes.bool, // Only for test. Don't use it.
-};
+const props = backTopTypes();
 
 const BackTop = {
   name: 'ABackTop',
   mixins: [BaseMixin],
   props: {
-    ...BackTopProps,
+    ...props,
     visibilityHeight: PropTypes.number.def(400),
   },
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     this.scrollEvent = null;
@@ -88,25 +84,21 @@ const BackTop = {
       </div>
     );
     const divProps = {
-      on: {
-        ...getListeners(this),
-        click: this.scrollToTop,
-      },
+      onClick: this.scrollToTop,
       class: prefixCls,
     };
 
     const backTopBtn = this.visible ? (
-      <div {...divProps}>{$slots.default || defaultElement}</div>
+      <div {...divProps}>{($slots.default && $slots.default()) || defaultElement}</div>
     ) : null;
     const transitionProps = getTransitionProps('fade');
     return <transition {...transitionProps}>{backTopBtn}</transition>;
   },
 };
 
 /* istanbul ignore next */
-BackTop.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(BackTop.name, BackTop);
+BackTop.install = function(app) {
+  app.component(BackTop.name, BackTop);
 };
 
 export default BackTop;

examples/index.js

@@ -21,6 +21,7 @@ import Col from 'ant-design-vue/col';
 import Row from 'ant-design-vue/row';
 import Tooltip from 'ant-design-vue/tooltip';
 import Descriptions from 'ant-design-vue/descriptions';
+import BackTop from 'ant-design-vue/back-top';
 import 'ant-design-vue/style.js';
 
 createApp(App)
@@ -44,4 +45,5 @@ createApp(App)
   .use(Row)
   .use(Tooltip)
   .use(Descriptions)
+  .use(BackTop)
   .mount('#app');