diff --git a/src/fab/README.en-US.md b/src/fab/README.en-US.md index d85a62e69..8653c16ee 100644 --- a/src/fab/README.en-US.md +++ b/src/fab/README.en-US.md @@ -6,14 +6,14 @@ name | type | default | description | required -- | -- | -- | -- | -- -style | String | right: 16px; bottom: 32px; | \- | N +style | Object | - | CSS(Cascading Style Sheets) | 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 | 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 +draggable | String / Boolean | false | Typescript:`boolean \| FabDirectionEnum ` `type FabDirectionEnum = '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` | N +y-bounds | Array | - | Typescript:`Array` | N ### Fab Events diff --git a/src/fab/README.md b/src/fab/README.md index aea3cf87c..e63c0c723 100644 --- a/src/fab/README.md +++ b/src/fab/README.md @@ -51,14 +51,14 @@ isComponent: true 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -style | String | right: 16px; bottom: 32px; | 悬浮按钮的样式,常用于调整位置(即将废弃,建议使用 `style`) | N +style | Object | - | 样式 | 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 | String / Boolean | false | 是否可拖拽。`true` / `'all'`可拖动
`'vertical'`可垂直拖动
`'horizontal'`可水平拖动
`false`禁止拖动。TS 类型:`boolean \| DirectionEnum ` `type DirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/fab/type.ts) | N +draggable | String / Boolean | false | 是否可拖拽。`true` / `'all'`可拖动
`'vertical'`可垂直拖动
`'horizontal'`可水平拖动
`false`禁止拖动。TS 类型:`boolean \| FabDirectionEnum ` `type FabDirectionEnum = '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` | N +y-bounds | Array | - | 设置垂直方向边界限制,示例:[48, 48] 或 ['96rpx', 80]。TS 类型:`Array` | N ### Fab Events diff --git a/src/fab/__test__/__snapshots__/demo.test.js.snap b/src/fab/__test__/__snapshots__/demo.test.js.snap index 62d49619c..17b45e5ef 100644 --- a/src/fab/__test__/__snapshots__/demo.test.js.snap +++ b/src/fab/__test__/__snapshots__/demo.test.js.snap @@ -34,7 +34,7 @@ exports[`Fab Fab draggable demo works fine 1`] = ` icon="gesture-press" text="拖我" usingCustomNavbar="{{true}}" - yEdge="{{ + yBounds="{{ Array [ 0, 32, diff --git a/src/fab/_example/draggable/index.wxml b/src/fab/_example/draggable/index.wxml index 38c2b3afd..390a9842b 100644 --- a/src/fab/_example/draggable/index.wxml +++ b/src/fab/_example/draggable/index.wxml @@ -6,5 +6,5 @@ aria-label="增加" usingCustomNavbar draggable - y-edge="{{[0, 32]}}" + y-bounds="{{[0, 32]}}" > diff --git a/src/fab/fab.ts b/src/fab/fab.ts index 5528db3d0..3f61d1853 100644 --- a/src/fab/fab.ts +++ b/src/fab/fab.ts @@ -52,15 +52,15 @@ export default class Fab extends SuperComponent { this.triggerEvent('click', e); }, onMove(e) { - const { yEdge } = this.properties; + const { yBounds } = this.properties; const { distanceTop } = this.data; const { x, y, rect } = e.detail; const maxX = systemInfo.windowWidth - rect.width; // 父容器宽度 - 拖动元素宽度 - const maxY = systemInfo.windowHeight - Math.max(distanceTop, unitConvert(yEdge[0])) - rect.height; // 父容器高度 - 拖动元素高度 + const maxY = systemInfo.windowHeight - Math.max(distanceTop, unitConvert(yBounds[0])) - rect.height; // 父容器高度 - 拖动元素高度 const right = Math.max(0, Math.min(x, maxX)); - const bottom = Math.max(0, unitConvert(yEdge[1]), Math.min(y, maxY)); + const bottom = Math.max(0, unitConvert(yBounds[1]), Math.min(y, maxY)); this.setData({ moveStyle: `right: ${right}px; bottom: ${bottom}px;`, }); diff --git a/src/fab/props.ts b/src/fab/props.ts index 576891f2d..b206fc958 100644 --- a/src/fab/props.ts +++ b/src/fab/props.ts @@ -36,7 +36,7 @@ const props: TdFabProps = { value: false, }, /** 设置垂直方向边界限制,示例:[48, 48] 或 ['96rpx', 80] */ - yEdge: { + yBounds: { type: Array, }, }; diff --git a/src/fab/type.ts b/src/fab/type.ts index 6dcff50bb..a70a45de4 100644 --- a/src/fab/type.ts +++ b/src/fab/type.ts @@ -20,7 +20,7 @@ export interface TdFabProps { */ draggable?: { type: null; - value?: boolean | DirectionEnum; + value?: boolean | FabDirectionEnum; }; /** * 图标 @@ -57,10 +57,10 @@ export interface TdFabProps { /** * 设置垂直方向边界限制,示例:[48, 48] 或 ['96rpx', 80] */ - yEdge?: { + yBounds?: { type: ArrayConstructor; value?: Array; }; } -export type DirectionEnum = 'all' | 'vertical' | 'horizontal'; +export type FabDirectionEnum = 'all' | 'vertical' | 'horizontal';