vue中如何调整tabBar图标大小

在Vue中调整`tabBar`（通常用于底部导航栏）图标的大小，你需要使用自定义组件，并利用CSS来自行设置样式。下面是一个基本步骤：

1. **创建自定义 tabBar 图标组件**:
首先，为每个图标创建一个单独的组件，例如`MyIcon.vue`，并将其宽度和高度设置为百分比值来适应调整：

   <template>
     <button :style="{ width: '25%' }">
       <img :src="iconSrc" :width="size" :height="size" />
     </button>
   </template>

使用`:style`绑定动态的CSS样式。

2. **在 App 或者父组件中使用自定义图标组件**:
将这个组件作为`vux`、vant等UI库的`tabBar`选项传递，如Vant的`van-tabbar`：

   <van-tabbar v-model="activeIndex" fixed z-index="1000">
     <van-tab :key="index" icon="your-icon-name" title="Tab Name" :custom-icon="require('@/components/MyIcon.vue')" />
     <!-- 更改其他 tab 样式 -->
   </van-tabbar>

`custom-icon`属性允许你使用自定义组件替换默认图标。

3. **调整图标大小**:
更新`MyIcon.vue`组件中的`size`数据，可以是计算属性，以便根据需要调整大小：

   computed: {
     size() {
       return this.iconSize || '24px'; // 可根据需求动态设置大小
     }
   },
   data() {
     return {
       iconSize: '25%'
     };
   }

4. **动态设置大小**:
如果你想让某个特定图标在某些状态时有特殊尺寸，可以在组件外部通过props传入尺寸值。

记得在项目中引入所需的CSS文件来覆盖默认样式。如果想全局调整所有`tabBar`图标，还可以考虑在项目的全局CSS或主题配置中修改样式。