diff --git a/packages/components/tab-bar-item/props.ts b/packages/components/tab-bar-item/props.ts index 556220674..2fae2122d 100644 --- a/packages/components/tab-bar-item/props.ts +++ b/packages/components/tab-bar-item/props.ts @@ -14,10 +14,20 @@ const props: TdTabBarItemProps = { icon: { type: null, }, + /** 页面跳转类型 */ + linkType: { + type: String, + value: 'redirectTo', + }, /** 二级菜单 */ subTabBar: { type: Array, }, + /** 点击后跳转的页面路径, 需要以 `/` 开头 */ + url: { + type: String, + value: '', + }, /** 标识符 */ value: { type: null, diff --git a/packages/components/tab-bar-item/tab-bar-item.ts b/packages/components/tab-bar-item/tab-bar-item.ts index 1fdcda025..879feddc8 100644 --- a/packages/components/tab-bar-item/tab-bar-item.ts +++ b/packages/components/tab-bar-item/tab-bar-item.ts @@ -77,7 +77,7 @@ export default class TabBarItem extends SuperComponent { }); }, toggle() { - const { currentName, hasChildren, isSpread } = this.data; + const { currentName, hasChildren, isSpread, url, linkType } = this.data; if (hasChildren) { this.setData({ @@ -86,6 +86,10 @@ export default class TabBarItem extends SuperComponent { } this.$parent.updateValue(currentName); this.$parent.changeOtherSpread(currentName); + + if (url && wx[linkType]) { + wx[linkType]({ url }); + } }, selectChild(event) { const { value } = event.target.dataset; diff --git a/packages/components/tab-bar-item/type.ts b/packages/components/tab-bar-item/type.ts index c5ef64806..ad3804473 100644 --- a/packages/components/tab-bar-item/type.ts +++ b/packages/components/tab-bar-item/type.ts @@ -21,6 +21,14 @@ export interface TdTabBarItemProps { type: null; value?: string | object; }; + /** + * 页面跳转类型 + * @default redirectTo + */ + linkType?: { + type: StringConstructor; + value?: 'redirectTo' | 'switchTab' | 'reLaunch' | 'navigateTo'; + }; /** * 二级菜单 */ @@ -28,6 +36,14 @@ export interface TdTabBarItemProps { type: ArrayConstructor; value?: SubTabBarItem[]; }; + /** + * 点击后跳转的页面路径, 需要以 `/` 开头 + * @default '' + */ + url?: { + type: StringConstructor; + value?: string; + }; /** * 标识符 */ diff --git a/packages/components/tab-bar/README.en-US.md b/packages/components/tab-bar/README.en-US.md index 969ff8e08..0bcdb9066 100644 --- a/packages/components/tab-bar/README.en-US.md +++ b/packages/components/tab-bar/README.en-US.md @@ -17,13 +17,13 @@ split | Boolean | true | \- | N theme | String | normal | options: normal/tag | N value | String / Number / Array | - | Typescript: `string \| number \| Array` | N default-value | String / Number / Array | undefined | uncontrolled property。Typescript: `string \| number \| Array` | N -z-index | Number | 1 | \- | N +z-index | Number | 1 | `1.12.1` | N ### TabBar Events name | params | description -- | -- | -- -change | `(value: string \| number)` | \- +change | `(detail: { value: string \| number })` | \- ### TabBar External Classes @@ -40,7 +40,9 @@ style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N badge-props | Object | - | Typescript: `BadgeProps`,[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tab-bar-item/type.ts) | N icon | String / Object | - | \- | N +link-type | String | redirectTo | `1.15.2`。options: redirectTo/switchTab/reLaunch/navigateTo | N sub-tab-bar | Array | - | Typescript: `SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tab-bar-item/type.ts) | N +url | String | - | `1.15.2` | N value | String / Number | - | \- | N ### TabBarItem Slots diff --git a/packages/components/tab-bar/README.md b/packages/components/tab-bar/README.md index 109b724f3..66155cb47 100644 --- a/packages/components/tab-bar/README.md +++ b/packages/components/tab-bar/README.md @@ -74,13 +74,13 @@ split | Boolean | true | 是否需要分割线 | N theme | String | normal | 选项风格。可选项:normal/tag | N value | String / Number / Array | - | 当前选中标签的索引。TS 类型:`string \| number \| Array` | N default-value | String / Number / Array | undefined | 当前选中标签的索引。非受控属性。TS 类型:`string \| number \| Array` | N -z-index | Number | 1 | 标签栏层级 | N +z-index | Number | 1 | `1.12.1`。标签栏层级 | N ### TabBar Events 名称 | 参数 | 描述 -- | -- | -- -change | `(value: string \| number)` | 选中标签切换时触发 +change | `(detail: { value: string \| number })` | 选中标签切换时触发 ### TabBar External Classes @@ -97,14 +97,16 @@ style | Object | - | 样式 | N custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N badge-props | Object | - | 图标右上角提示信息。TS 类型:`BadgeProps`,[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tab-bar-item/type.ts) | N icon | String / Object | - | 图标名称。传入对象时透传至 Icon 组件 | N +link-type | String | redirectTo | `1.15.2`。页面跳转类型。可选项:redirectTo/switchTab/reLaunch/navigateTo | N sub-tab-bar | Array | - | 二级菜单。TS 类型:`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/tab-bar-item/type.ts) | N +url | String | - | `1.15.2`。点击后跳转的页面路径, 需要以 `/` 开头 | N value | String / Number | - | 标识符 | N ### TabBarItem Slots 名称 | 描述 -- | -- -icon | 图标插槽,用于自定义图标区域内容 +icon | 自定义 `icon` 显示内容 ### CSS Variables diff --git a/packages/tdesign-miniprogram/.changelog/pr-4523.md b/packages/tdesign-miniprogram/.changelog/pr-4523.md new file mode 100644 index 000000000..0e5c9b4a9 --- /dev/null +++ b/packages/tdesign-miniprogram/.changelog/pr-4523.md @@ -0,0 +1,6 @@ +--- +pr_number: 4523 +contributor: anlyyao +--- + +- feat(TabbarItem): 新增 `url` 和 `linkType` 属性 @anlyyao ([#4523](https://github.com/Tencent/tdesign-miniprogram/pull/4523))