refactor(tabbar): 将图标类型从'local'重命名为'image'并添加警告
修改图标类型命名以更准确描述其用途 在image模式下未配置iconActive时添加控制台警告
This commit is contained in:
@@ -1,9 +1,9 @@
|
|||||||
import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
|
import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
|
||||||
|
|
||||||
type FgTabBarItem = TabBar['list'][0] & {
|
type FgTabBarItem = TabBar['list'][0] & {
|
||||||
iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'local'
|
iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image'
|
||||||
icon: any // 其实是 string 类型,这里是为了避免 ts 报错
|
icon: any // 其实是 string 类型,这里是为了避免 ts 报错
|
||||||
activeIcon?: string // 只有在 local 模式下才需要,传递的是高亮的图片(PS: 不建议用 local 模式)
|
activeIcon?: string // 只有在 image 模式下才需要,传递的是高亮的图片(PS: 不建议用 image 模式)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -79,7 +79,7 @@ export const tabbarList: FgTabBarItem[] = [
|
|||||||
// text: '首页',
|
// text: '首页',
|
||||||
// // 使用 ‘local’时,需要配置 icon + iconActive 2张图片(不推荐)
|
// // 使用 ‘local’时,需要配置 icon + iconActive 2张图片(不推荐)
|
||||||
// // 既然已经用了自定义tabbar了,就不建议用图片了,所以不推荐
|
// // 既然已经用了自定义tabbar了,就不建议用图片了,所以不推荐
|
||||||
// iconType: 'local',
|
// iconType: 'image',
|
||||||
// icon: '/static/tabbar/home.png',
|
// icon: '/static/tabbar/home.png',
|
||||||
// iconActive: '/static/tabbar/homeHL.png',
|
// iconActive: '/static/tabbar/homeHL.png',
|
||||||
// },
|
// },
|
||||||
|
|||||||
@@ -44,7 +44,11 @@ function getColorByIndex(index: number) {
|
|||||||
return tabbarStore.curIdx === index ? activeColor : inactiveColor
|
return tabbarStore.curIdx === index ? activeColor : inactiveColor
|
||||||
}
|
}
|
||||||
|
|
||||||
function getImageByIndex(index: number, item: { iconActive: string, icon: string }) {
|
function getImageByIndex(index: number, item: { iconActive?: string, icon: string }) {
|
||||||
|
if (!item.iconActive) {
|
||||||
|
console.warn('image 模式下,需要配置 iconActive,否则无法切换图片')
|
||||||
|
return item.icon
|
||||||
|
}
|
||||||
return tabbarStore.curIdx === index ? item.iconActive : item.icon
|
return tabbarStore.curIdx === index ? item.iconActive : item.icon
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -72,7 +76,7 @@ function getImageByIndex(index: number, item: { iconActive: string, icon: string
|
|||||||
<template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
|
<template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
|
||||||
<view :class="item.icon" class="text-20px" />
|
<view :class="item.icon" class="text-20px" />
|
||||||
</template>
|
</template>
|
||||||
<template v-if="item.iconType === 'local'">
|
<template v-if="item.iconType === 'image'">
|
||||||
<image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" />
|
<image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" />
|
||||||
</template>
|
</template>
|
||||||
<view class="mt-2px text-12px">
|
<view class="mt-2px text-12px">
|
||||||
|
|||||||
Reference in New Issue
Block a user