Merge pull request #289 from TDesignOteam/feat/mobile/back-top

feat(back-top): add visibilityHeight,container api
TDesignOteam · May 31, 2024 · f36f608 · f36f608
2 parents 271c311 + 8ef86da
commit f36f608
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 18 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-miniprogram/src/back-top/props.ts b/packages/products/tdesign-miniprogram/src/back-top/props.ts
@@ -6,19 +6,20 @@
 
 import { TdBackTopProps } from './type';
 const props: TdBackTopProps = {
-  /** 组件类名，分别用于设置外层元素、图标、文本内容等元素类名 */
-  externalClasses: {
-    type: Array,
-  },
   /** 是否绝对定位固定到屏幕右下方 */
   fixed: {
     type: Boolean,
     value: true,
   },
-  /** 图标 */
+  /** 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` */
   icon: {
-    type: String,
-    value: 'backtop',
+    type: null,
+    value: true,
+  },
+  /** 页面滚动距离 */
+  scrollTop: {
+    type: Number,
+    value: 0,
   },
   /** 自定义组件样式 */
   style: {
@@ -35,6 +36,11 @@ const props: TdBackTopProps = {
     type: String,
     value: 'round',
   },
+  /** 滚动高度达到此参数值才出现 */
+  visibilityHeight: {
+    type: Number,
+    value: 200,
+  },
 };
 
 export default props;
diff --git a/packages/products/tdesign-miniprogram/src/back-top/type.ts b/packages/products/tdesign-miniprogram/src/back-top/type.ts
@@ -5,13 +5,6 @@
  * */
 
 export interface TdBackTopProps {
-  /**
-   * 组件类名，分别用于设置外层元素、图标、文本内容等元素类名
-   */
-  externalClasses?: {
-    type: ArrayConstructor;
-    value?: ['t-class', 't-class-icon', 't-class-text'];
-  };
   /**
    * 是否绝对定位固定到屏幕右下方
    * @default true
@@ -21,12 +14,20 @@ export interface TdBackTopProps {
     value?: boolean;
   };
   /**
-   * 图标
-   * @default 'backtop'
+   * 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'`
+   * @default true
    */
   icon?: {
-    type: StringConstructor;
-    value?: string;
+    type: null;
+    value?: string | boolean | object;
+  };
+  /**
+   * 页面滚动距离
+   * @default 0
+   */
+  scrollTop?: {
+    type: NumberConstructor;
+    value?: number;
   };
   /**
    * 自定义组件样式
@@ -52,4 +53,12 @@ export interface TdBackTopProps {
     type: StringConstructor;
     value?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
   };
+  /**
+   * 滚动高度达到此参数值才出现
+   * @default 200
+   */
+  visibilityHeight?: {
+    type: NumberConstructor;
+    value?: number;
+  };
 }
diff --git a/packages/products/tdesign-mobile-vue/src/back-top/back-top.en-US.md b/packages/products/tdesign-mobile-vue/src/back-top/back-top.en-US.md
@@ -6,11 +6,13 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+container | Function | - | Typescript：`() => HTMLElement` | N
 fixed | Boolean | true | \- | N
 icon | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/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
 
 ### BackTop Events

diff --git a/packages/products/tdesign-mobile-vue/src/back-top/back-top.md b/packages/products/tdesign-mobile-vue/src/back-top/back-top.md
@@ -6,11 +6,13 @@
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+container | Function | - | 滚动的容器。TS 类型：`() => HTMLElement` | N
 fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
 icon | Boolean / Slot / Function | true | 图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/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
 
 ### BackTop Events

diff --git a/packages/products/tdesign-mobile-vue/src/back-top/props.ts b/packages/products/tdesign-mobile-vue/src/back-top/props.ts
@@ -0,0 +1,50 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdBackTopProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 滚动的容器 */
+  container: {
+    type: Function as PropType<TdBackTopProps['container']>,
+  },
+  /** 是否绝对定位固定到屏幕右下方 */
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  /** 图标 */
+  icon: {
+    type: [Boolean, Function] as PropType<TdBackTopProps['icon']>,
+    default: true,
+  },
+  /** 定位滚动到指定对象 */
+  target: {
+    type: Function as PropType<TdBackTopProps['target']>,
+  },
+  /** 文案 */
+  text: {
+    type: String,
+    default: '',
+  },
+  /** 预设的样式类型 */
+  theme: {
+    type: String as PropType<TdBackTopProps['theme']>,
+    default: 'round' as TdBackTopProps['theme'],
+    validator(val: TdBackTopProps['theme']): boolean {
+      if (!val) return true;
+      return ['round', 'half-round', 'round-dark', 'half-round-dark'].includes(val);
+    },
+  },
+  /** 滚动高度达到此参数值才出现 */
+  visibilityHeight: {
+    type: Number,
+    default: 200,
+  },
+  /** 点击触发 */
+  onToTop: Function as PropType<TdBackTopProps['onToTop']>,
+};
diff --git a/packages/products/tdesign-mobile-vue/src/back-top/type.ts b/packages/products/tdesign-mobile-vue/src/back-top/type.ts
@@ -0,0 +1,47 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode } from '../common';
+
+export interface TdBackTopProps {
+  /**
+   * 滚动的容器
+   */
+  container?: () => HTMLElement;
+  /**
+   * 是否绝对定位固定到屏幕右下方
+   * @default true
+   */
+  fixed?: boolean;
+  /**
+   * 图标
+   * @default true
+   */
+  icon?: boolean | TNode;
+  /**
+   * 定位滚动到指定对象
+   */
+  target?: () => HTMLElement;
+  /**
+   * 文案
+   * @default ''
+   */
+  text?: string;
+  /**
+   * 预设的样式类型
+   * @default round
+   */
+  theme?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
+  /**
+   * 滚动高度达到此参数值才出现
+   * @default 200
+   */
+  visibilityHeight?: number;
+  /**
+   * 点击触发
+   */
+  onToTop?: () => void;
+}
diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -7276,6 +7276,47 @@
         "Function"
       ]
     },
+    {
+      "id": 1716954799,
+      "platform_framework": [
+        "8",
+        "16",
+        "32"
+      ],
+      "component": "BackTop",
+      "field_category": 1,
+      "field_name": "container",
+      "field_type": [
+        "32"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "滚动的容器",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-05-29 03:53:19",
+      "update_time": "2024-05-29 03:53:19",
+      "event_output": null,
+      "custom_field_type": "() => HTMLElement",
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Angular(Mobile)"
+      ],
+      "field_type_text": [
+        "Function"
+      ]
+    },
     {
       "id": 3024,
       "platform_framework": [
@@ -7978,6 +8019,9 @@
     {
       "id": 1711970473,
       "platform_framework": [
+        "8",
+        "16",
+        "32",
         "64"
       ],
       "component": "BackTop",
@@ -8006,6 +8050,9 @@
       "support_default_value": 0,
       "field_category_text": "Props",
       "platform_framework_text": [
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Angular(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": [