diff --git a/packages/components/fab/README.en-US.md b/packages/components/fab/README.en-US.md index b3f1dc45d..419b09005 100644 --- a/packages/components/fab/README.en-US.md +++ b/packages/components/fab/README.en-US.md @@ -8,12 +8,12 @@ name | type | default | description | required -- | -- | -- | -- | -- 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/blob/develop/packages/components/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/blob/develop/packages/components/fab/type.ts) | N -icon | String | - | \- | N +button-props | Object | - | Typescript: `ButtonProps`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/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/blob/develop/packages/components/fab/type.ts) | N +icon | String / Object | - | icon name | N text | String | - | \- | N using-custom-navbar | Boolean | false | \- | N -y-bounds | Array | - | Typescript:`Array` | N +y-bounds | Array | - | Typescript: `Array` | N ### Fab Events diff --git a/packages/components/fab/README.md b/packages/components/fab/README.md index fe5779032..3a75dc7da 100644 --- a/packages/components/fab/README.md +++ b/packages/components/fab/README.md @@ -72,7 +72,7 @@ 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/blob/develop/packages/components/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/blob/develop/packages/components/fab/type.ts) | N -icon | String | - | 图标 | N +icon | String / Object | - | 图标名称。值为字符串表示图标名称,值为 `Object` 类型,表示透传至 `icon` 组件 | N text | String | - | 文本内容 | N using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N y-bounds | Array | - | 设置垂直方向边界限制,示例:[48, 48] 或 ['96px', 80]。TS 类型:`Array` | N diff --git a/packages/components/fab/fab.ts b/packages/components/fab/fab.ts index 697750f9b..0041f6918 100644 --- a/packages/components/fab/fab.ts +++ b/packages/components/fab/fab.ts @@ -2,7 +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, systemInfo } from '../common/utils'; +import { calcIcon, unitConvert, systemInfo } from '../common/utils'; const { prefix } = config; const name = `${prefix}-fab`; @@ -36,7 +36,7 @@ export default class Fab extends SuperComponent { ...baseButtonProps, shape: this.properties.text ? 'round' : 'circle', ...this.properties.buttonProps, - icon: this.properties.icon, + icon: calcIcon(this.properties.icon), content: this.properties.text, ariaLabel: this.properties.ariaLabel, }, diff --git a/packages/components/fab/props.ts b/packages/components/fab/props.ts index 37e3f5591..6a8bf1f55 100644 --- a/packages/components/fab/props.ts +++ b/packages/components/fab/props.ts @@ -15,10 +15,9 @@ const props: TdFabProps = { type: null, value: false, }, - /** 图标 */ + /** 图标名称。值为字符串表示图标名称,值为 `Object` 类型,表示透传至 `icon` 组件 */ icon: { - type: String, - value: '', + type: null, }, /** 悬浮按钮的样式,常用于调整位置(即将废弃,建议使用 `style`) */ style: { diff --git a/packages/components/fab/type.ts b/packages/components/fab/type.ts index 37575f764..96ed8bf21 100644 --- a/packages/components/fab/type.ts +++ b/packages/components/fab/type.ts @@ -23,12 +23,11 @@ export interface TdFabProps { value?: boolean | FabDirectionEnum; }; /** - * 图标 - * @default '' + * 图标名称。值为字符串表示图标名称,值为 `Object` 类型,表示透传至 `icon` 组件 */ icon?: { - type: StringConstructor; - value?: string; + type: null; + value?: string | object; }; /** * 悬浮按钮的样式,常用于调整位置(即将废弃,建议使用 `style`) diff --git a/packages/tdesign-miniprogram/.changelog/pr-4400.md b/packages/tdesign-miniprogram/.changelog/pr-4400.md new file mode 100644 index 000000000..a076bfa84 --- /dev/null +++ b/packages/tdesign-miniprogram/.changelog/pr-4400.md @@ -0,0 +1,6 @@ +--- +pr_number: 4400 +contributor: anlyyao +--- + +- feat(Fab): 为 `icon` 属性新增 `Object` 类型,支持透传到图标组件 @anlyyao ([#4400](https://github.com/Tencent/tdesign-miniprogram/pull/4400))