refactor(TabBar): 格式化模板代码并调整注释结构
将模板中的长属性拆分为多行以提升可读性 调整 handleTabClick 函数内的注释格式,使其更清晰
Showing
1 changed file
with
8 additions
and
17 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2026-01-29 20:33:23 | 2 | * @Date: 2026-01-29 20:33:23 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2026-01-30 20:13:36 | 4 | + * @LastEditTime: 2026-01-30 21:03:18 |
| 5 | * @FilePath: /manulife-weapp/src/components/TabBar.vue | 5 | * @FilePath: /manulife-weapp/src/components/TabBar.vue |
| 6 | * @Description: 通用底部导航栏组件,用于页面底部固定导航栏,展示页面标题。 | 6 | * @Description: 通用底部导航栏组件,用于页面底部固定导航栏,展示页面标题。 |
| 7 | --> | 7 | --> |
| 8 | <template> | 8 | <template> |
| 9 | - <view class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50"> | ||
| 10 | - <view class="flex items-center justify-around py-[32rpx]"> | ||
| 11 | <view | 9 | <view |
| 12 | - class="flex-1 flex flex-col items-center justify-center" | 10 | + class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50"> |
| 13 | - v-for="(item, index) in tabs" | 11 | + <view class="flex items-center justify-around py-[32rpx]"> |
| 14 | - :key="index" | 12 | + <view class="flex-1 flex flex-col items-center justify-center" v-for="(item, index) in tabs" :key="index" |
| 15 | - @tap="handleTabClick(item)" | 13 | + @tap="handleTabClick(item)"> |
| 16 | - > | 14 | + <IconFont :name="item.icon" :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']" size="24" /> |
| 17 | - <IconFont | 15 | + <text class="text-[20rpx] mt-[8rpx]" :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']">{{ |
| 18 | - :name="item.icon" | 16 | + item.label }}</text> |
| 19 | - :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']" | ||
| 20 | - size="24" | ||
| 21 | - /> | ||
| 22 | - <text | ||
| 23 | - class="text-[20rpx] mt-[8rpx]" | ||
| 24 | - :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']" | ||
| 25 | - >{{ item.label }}</text> | ||
| 26 | </view> | 17 | </view> |
| 27 | </view> | 18 | </view> |
| 28 | </view> | 19 | </view> | ... | ... |
-
Please register or login to post a comment