feat(Fab): support y-edge props

src/fab/README.en-US.md

@@ -9,10 +9,11 @@ name | type | default | description | required
 style | String | right: 16px; bottom: 32px; | \- | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 button-props | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/fab/type.ts) | N
-draggable | Boolean / String | false | \- | N
+draggable | String / Boolean | false | Typescript：`boolean \| DirectionEnum ` `type DirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/fab/type.ts) | N
 icon | String | - | \- | N
 text | String | - | \- | N
 using-custom-navbar | Boolean | false | \- | N
+y-edge | Array | - | Typescript：`Array<string \| number>` | N
 
 ### Fab Events
 

src/fab/README.md

@@ -54,10 +54,11 @@ isComponent: true
 style | String | right: 16px; bottom: 32px; | 悬浮按钮的样式，常用于调整位置（即将废弃，建议使用 `style`） | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 button-props | Object | - | 透传至 Button 组件。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/fab/type.ts) | N
-draggable | Boolean / String | false | `true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动 | N
+draggable | String / Boolean | false | 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动。TS 类型：`boolean \| DirectionEnum ` `type DirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/fab/type.ts) | N
 icon | String | - | 图标 | N
 text | String | - | 文本内容 | N
 using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+y-edge | Array | - | 设置垂直方向边界限制，示例：[48, 48] 或 ['96rpx', 80]。TS 类型：`Array<string \| number>` | N
 
 ### Fab Events
 

src/fab/fab.ts

@@ -2,6 +2,7 @@ import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
 import useCustomNavbar from '../mixins/using-custom-navbar';
+import { unitConvert } from '../common/utils';
 
 const systemInfo = wx.getSystemInfoSync();
 const { prefix } = config;
@@ -51,14 +52,15 @@ export default class Fab extends SuperComponent {
       this.triggerEvent('click', e);
     },
     onMove(e) {
+      const { yEdge } = this.properties;
       const { distanceTop } = this.data;
 
       const { x, y, rect } = e.detail;
       const maxX = systemInfo.windowWidth - rect.width; // 父容器宽度 - 拖动元素宽度
-      const maxY = systemInfo.windowHeight - distanceTop - rect.height; // 父容器高度 - 拖动元素高度
+      const maxY = systemInfo.windowHeight - Math.max(distanceTop, unitConvert(yEdge[0])) - rect.height; // 父容器高度 - 拖动元素高度
 
       const right = Math.max(0, Math.min(x, maxX));
-      const bottom = Math.max(0, Math.min(y, maxY));
+      const bottom = Math.max(0, unitConvert(yEdge[1]), Math.min(y, maxY));
       this.setData({
         moveStyle: `right: ${right}px; bottom: ${bottom}px;`,
       });

src/fab/props.ts

@@ -10,10 +10,9 @@ const props: TdFabProps = {
   buttonProps: {
     type: Object,
   },
-  /** 是否可移动 */
+  /** 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动 */
   draggable: {
-    type: Boolean,
-    optionalTypes: [String],
+    type: null,
     value: false,
   },
   /** 图标 */
@@ -31,6 +30,15 @@ const props: TdFabProps = {
     type: String,
     value: '',
   },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: {
+    type: Boolean,
+    value: false,
+  },
+  /** 设置垂直方向边界限制，示例：[48, 48] 或 ['96rpx', 80] */
+  yEdge: {
+    type: Array,
+  },
 };
 
 export default props;

src/fab/type.ts

@@ -15,13 +15,12 @@ export interface TdFabProps {
     value?: ButtonProps;
   };
   /**
-   * 是否可移动
+   * 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动
    * @default false
    */
   draggable?: {
-    type: BooleanConstructor;
-    optionalTypes: Array<StringConstructor>;
-    value?: boolean | 'all' | 'vertical' | 'horizontal';
+    type: null;
+    value?: boolean | DirectionEnum;
   };
   /**
    * 图标
@@ -55,4 +54,13 @@ export interface TdFabProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 设置垂直方向边界限制，示例：[48, 48] 或 ['96rpx', 80]
+   */
+  yEdge?: {
+    type: ArrayConstructor;
+    value?: Array<string | number>;
+  };
 }
+
+export type DirectionEnum = 'all' | 'vertical' | 'horizontal';