uniapp vue3 tabBar 购物车图标如何显示数量

在 UniApp 中使用 Vue3 开发 TabBar（底部导航栏）时，如果你想要在购物车图标旁边显示商品的数量，你可以创建自定义的 tabBar-item 并结合 Vue 的响应式特性来实现动态展示。这里是一个简单的示例：

首先，定义一个组件，比如 `CartIcon.vue`，它包含商品数量信息：

<template>
  <view :class="{ 'cart-icon': true, 'has-count': count > 0 }">
    <image src="路径/to/cart-icon.png" class="icon" />
    {{ count > 0 ? `(${count})` : '' }}
  </view>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      required: true
    }
  }
};
</script>

<style scoped>
.cart-icon {
  /* 样式设置 */
}

.has-count {
  /* 当有数量时添加额外样式 */
}
</style>

接着，在你的 App 或者某个视图组件中使用这个组件，并传入实际的商品数量：

<template>
  <uni-tabbar v-model="activeIndex" @tabclick="handleTabClick">
    <uni-tabBarItem
      :selected="index === activeIndex"
      icon-path="路径/to/home-icon.png"
      text="首页"
      path="/pages/home/home"
      @click="handleHomeClick"
    ></uni-tabBarItem>
    
    <!-- 添加 CartIcon 组件 -->
    <uni-tabBarItem
      :selected="index === activeIndex"
      icon-component="src/components/CartIcon.vue"
      :props="{ count: cartItemCount }"
      text="购物车"
      path="/pages/cart/cart"
      @click="handleCartClick"
    ></uni-tabBarItem>
  </uni-tabbar>
</template>

<script>
import CartIcon from '@/components/CartIcon.vue';

export default {
  components: { CartIcon },
  data() {
    return {
      activeIndex: 0,
      cartItemCount: 0, // 初始化购物车数量
    };
  },
  methods: {
    handleTabClick(index) {
      this.activeIndex = index;
    },
    handleHomeClick() {
      //...
    },
    handleCartClick() {
      // 更新购物车数量
      this.cartItemCount = 10; // 这里只是一个示例，实际请从服务端获取
    }
  }
};
</script>

每次购物车数量发生变化时，记得调用 `handleCartClick` 方法更新 `cartItemCount`，从而触发 `CartIcon` 组件内数量的变化。