feat(TabbarItem): support url and linkType props (#4523)

* feat(TabbarItem): support url and linkType props

* chore: stash changelog [ci skip]

* docs: sync api doc

---------

Co-authored-by: tdesign-bot <tdesign@tencent.com>
Co-authored-by: 黎伟杰 <674416404@qq.com>

Author: 3 people

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,

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;

packages/components/tab-bar-item/type.ts

@@ -21,13 +21,29 @@ export interface TdTabBarItemProps {
     type: null;
     value?: string | object;
   };
+  /**
+   * 页面跳转类型
+   * @default redirectTo
+   */
+  linkType?: {
+    type: StringConstructor;
+    value?: 'redirectTo' | 'switchTab' | 'reLaunch' | 'navigateTo';
+  };
   /**
    * 二级菜单
    */
   subTabBar?: {
     type: ArrayConstructor;
     value?: SubTabBarItem[];
   };
+  /**
+   * 点击后跳转的页面路径, 需要以 `/` 开头
+   * @default ''
+   */
+  url?: {
+    type: StringConstructor;
+    value?: string;
+  };
   /**
    * 标识符
    */

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<string \| number>` | N
 default-value | String / Number / Array | undefined | uncontrolled property。Typescript: `string \| number \| Array<string \| number>` | 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

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<string \| number>` | N
 default-value | String / Number / Array | undefined | 当前选中标签的索引。非受控属性。TS 类型：`string \| number \| Array<string \| number>` | 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
 

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))