feat(back-top): api功能对齐mobile vue

src/back-top/Backtop.tsx

@@ -18,10 +18,11 @@ export const defaultProps = {
   target: (() => window) as any,
   text: '',
   theme: 'round' as ThemeList,
+  visibilityHeight: 200,
 };
 
 const BackTop: React.FC<BackTopProps> = (props) => {
-  const { fixed, icon, target, text, theme } = props;
+  const { fixed, icon, target, text, theme, onToTop, visibilityHeight, container } = props;
 
   const [show, { setTrue, setFalse }] = useBoolean(false);
 
@@ -33,7 +34,16 @@ const BackTop: React.FC<BackTopProps> = (props) => {
 
   const name = `${classPrefix}-back-top`;
 
-  const scroll = useScroll(document);
+  const getContainer = (container: Function) => {
+    if (typeof container === 'function') {
+      return container();
+    }
+    return document.documentElement;
+  };
+  const containerDom = useRef<HTMLElement>(null);
+  containerDom.current = getContainer(container);
+
+  const scroll = useScroll(typeof container === 'function' ? containerDom.current : document);
 
   useMount(() => {
     smoothscroll.polyfill();
@@ -44,16 +54,18 @@ const BackTop: React.FC<BackTopProps> = (props) => {
   const targetHeight = isWindow(backTopDom.current) ? 0 : backTopDom.current?.offsetTop || 0;
 
   useEffect(() => {
-    // 当滚动条滚动到超过锚点二分之一个屏幕后，显示回到顶部按钮
-    const screenHeight = window.innerHeight;
-    if (scroll?.top > screenHeight / 2 + targetHeight) {
+    // 当滚动条滚动到 设置滚动高度时，显示回到顶部按钮
+    if (scroll?.top >= visibilityHeight) {
       setTrue();
     } else {
       setFalse();
     }
-  }, [scroll, setTrue, setFalse, targetHeight]);
+  }, [scroll, setTrue, setFalse, visibilityHeight]);
 
-  const onClick = () => document.documentElement.scrollTo({ top: targetHeight, behavior: 'smooth' });
+  const onClick = () => {
+    containerDom.current.scrollTo({ top: 0 + targetHeight, behavior: 'smooth' });
+    onToTop?.();
+  };
 
   return withNativeProps(
     props,

src/back-top/back-top.en-US.md

@@ -0,0 +1,19 @@
+:: BASE_DOC ::
+
+## API
+
+
+### BackTop Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+container | Function | - | Typescript：`() => HTMLElement` | N
+fixed | Boolean | true | \- | N
+icon | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+target | Function | - | Typescript：`() => HTMLElement` | N
+text | String | '' | \- | N
+theme | String | round | options: round/half-round/round-dark/half-round-dark | N
+visibilityHeight | Number | 200 | \- | N
+onToTop | Function |  | Typescript：`() => void`<br/> | N

src/back-top/back-top.md

@@ -4,12 +4,15 @@
 
 ### BackTop Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+container | Function | - | 滚动的容器。TS 类型：`() => HTMLElement` | N
 fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
-icon | TNode | 'backtop' | 图标。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-target | Object | () => window | 定位滚动到指定对象。TS 类型：`() => HTMLElement` | N
+icon | TNode | true | 图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+target | Function | - | 定位滚动到指定对象。TS 类型：`() => HTMLElement` | N
 text | String | '' | 文案 | N
 theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
+visibilityHeight | Number | 200 | 滚动高度达到此参数值才出现 | N
+onToTop | Function |  | TS 类型：`() => void`<br/>点击触发 | N

src/back-top/defaultProps.ts

@@ -0,0 +1,13 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdBackTopProps } from './type';
+
+export const backTopDefaultProps: TdBackTopProps = {
+  fixed: true,
+  icon: true,
+  text: '',
+  theme: 'round',
+  visibilityHeight: 200,
+};

src/back-top/type.ts

@@ -7,19 +7,22 @@
 import { TNode } from '../common';
 
 export interface TdBackTopProps {
+  /**
+   * 滚动的容器
+   */
+  container?: () => HTMLElement;
   /**
    * 是否绝对定位固定到屏幕右下方
    * @default true
    */
   fixed?: boolean;
   /**
    * 图标
-   * @default 'backtop'
+   * @default true
    */
   icon?: TNode;
   /**
    * 定位滚动到指定对象
-   * @default () => window
    */
   target?: () => HTMLElement;
   /**
@@ -32,4 +35,13 @@ export interface TdBackTopProps {
    * @default round
    */
   theme?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
+  /**
+   * 滚动高度达到此参数值才出现
+   * @default 200
+   */
+  visibilityHeight?: number;
+  /**
+   * 点击触发
+   */
+  onToTop?: () => void;
 }

src/common.ts

@@ -5,7 +5,7 @@ import { ReactElement, ReactNode, CSSProperties, FormEvent, DragEvent, Synthetic
 // TElement 表示 API 只接受传入组件
 export type TElement<T = undefined> = T extends undefined ? ReactElement : (props: T) => ReactElement;
 // 1. TNode = ReactNode; 2. TNode<T> = (props: T) => ReactNode
-export type TNode<T = undefined> = T extends undefined ? ReactNode : (props: T) => ReactNode;
+export type TNode<T = undefined> = T extends undefined ? ReactNode | (() => ReactNode) : ReactNode | ((props: T) => ReactNode);
 
 export type AttachNodeReturnValue = HTMLElement | Element | Document;
 export type AttachNode = CSSSelector | ((triggerNode?: HTMLElement) => AttachNodeReturnValue);