chore(tabbar): add deprecated tag (jd-opensource#2994)

8392 · Mar 25, 2024 · cc8b5a0 · cc8b5a0
1 parent ccc7b26
commit cc8b5a0
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 28 deletions.
diff --git a/src/packages/__VUE/tabbar/doc.en-US.md b/src/packages/__VUE/tabbar/doc.en-US.md
@@ -73,8 +73,8 @@ The bardge logo component is used internally and its properties can be applied d
 | tab-title | title | string | -- |
 | name | Identifier | string | `Item index` |
 | icon | icon name | string | -- |
-| href | Jump links for tabs | string | -- |
-| to | Target route of the link, same as to of vue-router | string \| object | -- |
+| href `deprecated` | Jump links for tabs | string | -- |
+| to `deprecated` | Target route of the link, same as to of vue-router | string \| object | -- |
 
 ### TabbarItem Slots
 

diff --git a/src/packages/__VUE/tabbar/doc.md b/src/packages/__VUE/tabbar/doc.md
@@ -73,8 +73,8 @@ app.use(TabbarItem);
 | tab-title | 标签页的标题 | string | -- |
 | name | 标签名称，作为匹配的标识符 | string | `当前标签的索引值` |
 | icon | 标签页显示的[图标](#/zh-CN/component/icon) | Component | -- |
-| href | 标签页的跳转链接；如果同时存在 `to`，优先级高于 `to` | string | -- |
-| to | 标签页的路由对象，等于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | string \| object | -- |
+| href `deprecated` | 标签页的跳转链接；如果同时存在 `to`，优先级高于 `to` | string | -- |
+| to `deprecated` | 标签页的路由对象，等于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | string \| object | -- |
 
 ### TabbarItem Slots
 

diff --git a/src/packages/__VUE/tabbaritem/tabbar-item.taro.vue b/src/packages/__VUE/tabbaritem/tabbar-item.taro.vue
@@ -9,18 +9,15 @@
   >
     <nut-badge v-bind="$attrs">
       <view class="nut-tabbar-item_icon-box">
-        <div v-if="isHaveSlot('icon')" class="nut-tabbar-item_icon-box_icon">
+        <div v-if="$slots.icon" class="nut-tabbar-item_icon-box_icon">
           <slot name="icon" :active="active"></slot>
         </div>
-        <view v-if="icon && !isHaveSlot('icon')">
+        <view v-if="icon && !$slots.icon">
           <component :is="renderIcon(icon)" class="nut-popover-item-img"></component>
         </view>
 
         <view
-          :class="[
-            'nut-tabbar-item_icon-box_nav-word',
-            { 'nut-tabbar-item_icon-box_big-word': !icon && !isHaveSlot('icon') }
-          ]"
+          :class="['nut-tabbar-item_icon-box_nav-word', { 'nut-tabbar-item_icon-box_big-word': !icon && !$slots.icon }]"
         >
           <slot>
             <view v-if="tabTitle">{{ tabTitle }}</view>
@@ -32,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useSlots } from 'vue';
+import { computed } from 'vue';
 import { renderIcon } from '@/packages/utils/create';
 import { useRouter } from '@/packages/utils/useRoute';
 import { useParent } from '@/packages/utils';
@@ -47,7 +44,13 @@ export type TabbarItemProps = Partial<{
   tabTitle: string;
   name: string;
   icon: any;
+  /**
+   * @deprecated It will be removed in next major version.
+   */
   href: string;
+  /**
+   * @deprecated It will be removed in next major version.
+   */
   to: string | Record<never, any>;
 }>;
 
@@ -56,17 +59,12 @@ const props = withDefaults(defineProps<TabbarItemProps>(), {
   href: ''
 });
 
-const slots = useSlots();
 const router = useRouter();
 const { parent, index } = useParent(TABBAR_KEY);
 
 const active = computed(() => (props.name ?? index.value) === parent.activeIndex.value);
 const activeColor = computed(() => (active.value ? parent.props.activeColor : parent.props.unactiveColor));
 
-const isHaveSlot = (slot: string) => {
-  return slots[slot];
-};
-
 const change = () => {
   const key = props.name ?? index.value;
   parent.changeIndex(index.value, key);

diff --git a/src/packages/__VUE/tabbaritem/tabbar-item.vue b/src/packages/__VUE/tabbaritem/tabbar-item.vue
@@ -9,18 +9,15 @@
   >
     <nut-badge v-bind="$attrs">
       <view class="nut-tabbar-item_icon-box">
-        <div v-if="isHaveSlot('icon')" class="nut-tabbar-item_icon-box_icon">
+        <div v-if="$slots.icon" class="nut-tabbar-item_icon-box_icon">
           <slot name="icon" :active="active"></slot>
         </div>
-        <view v-if="icon && !isHaveSlot('icon')">
+        <view v-if="icon && !$slots.icon">
           <component :is="renderIcon(icon)" class="nut-popover-item-img"></component>
         </view>
 
         <view
-          :class="[
-            'nut-tabbar-item_icon-box_nav-word',
-            { 'nut-tabbar-item_icon-box_big-word': !icon && !isHaveSlot('icon') }
-          ]"
+          :class="['nut-tabbar-item_icon-box_nav-word', { 'nut-tabbar-item_icon-box_big-word': !icon && !$slots.icon }]"
         >
           <slot>
             <view v-if="tabTitle">{{ tabTitle }}</view>
@@ -32,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useSlots } from 'vue';
+import { computed } from 'vue';
 import { renderIcon } from '@/packages/utils/create';
 import { useRouter } from '@/packages/utils/useRoute';
 import { useParent } from '@/packages/utils';
@@ -47,7 +44,13 @@ export type TabbarItemProps = Partial<{
   tabTitle: string;
   name: string;
   icon: any;
+  /**
+   * @deprecated It will be removed in next major version.
+   */
   href: string;
+  /**
+   * @deprecated It will be removed in next major version.
+   */
   to: string | Record<never, any>;
 }>;
 
@@ -56,17 +59,12 @@ const props = withDefaults(defineProps<TabbarItemProps>(), {
   href: ''
 });
 
-const slots = useSlots();
 const router = useRouter();
 const { parent, index } = useParent(TABBAR_KEY);
 
 const active = computed(() => (props.name ?? index.value) === parent.activeIndex.value);
 const activeColor = computed(() => (active.value ? parent.props.activeColor : parent.props.unactiveColor));
 
-const isHaveSlot = (slot: string) => {
-  return slots[slot];
-};
-
 const change = () => {
   const key = props.name ?? index.value;
   parent.changeIndex(index.value, key);