style:tabbar样式调整

master
黄伟杰 3 weeks ago
parent 65d190f674
commit 207d049205

@ -4,11 +4,13 @@
:fixed="true" :placeholder="true" :border="false" @change="handleChange" zIndex="1000">
<up-tabbar-item v-for="(item, index) in tabList" :key="index" :text="item.text" :name="index">
<template #active-icon>
<uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="24" :color="activeColor" />
<uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="30" :color="activeColor" />
<u-icon v-else-if="item.iconType === 'uview-plus'" :name="item.iconName" size="30" :color="activeColor"></u-icon>
<image v-else :src="item.selectedIcon" class="tabbar-icon" mode="widthFix" />
</template>
<template #inactive-icon>
<uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="24" :color="inactiveColor" />
<uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="30" :color="inactiveColor" />
<u-icon v-else-if="item.iconType === 'uview-plus'" :name="item.iconName" size="30" :color="inactiveColor"></u-icon>
<image v-else :src="item.icon" class="tabbar-icon" mode="widthFix" />
</template>
</up-tabbar-item>
@ -21,44 +23,18 @@ import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import useUserStore from '@/store/modules/user'
import { storeToRefs } from 'pinia'
import { getTabBarMenus } from '@/utils/permissionMenu'
import { useI18n } from 'vue-i18n'
const TABBAR_VISIBILITY_EVENT = 'tabbar-visibility-change'
const { t } = useI18n()
const userStore = useUserStore()
const { menus } = storeToRefs(userStore)
const inactiveColor = '#666666'
const activeColor = '#1a3a5c'
const activeColor = '#409eff'
const activeIndex = ref(0)
const tabbarVisible = ref(true)
const homeIcon = '/static/images/tabbar/home.png'
const homeSelectedIcon = '/static/images/tabbar/home_.png'
const reportIcon = '/static/images/tabbar/report.png'
const reportSelectedIcon = '/static/images/tabbar/report_.png'
const workIcon = '/static/images/tabbar/work.png'
const workSelectedIcon = '/static/images/tabbar/work_.png'
const mineIcon = '/static/images/tabbar/mine.png'
const mineSelectedIcon = '/static/images/tabbar/mine_.png'
const dynamicTabIconList = [
{
icon: homeIcon,
selectedIcon: homeSelectedIcon
},
{
icon: reportIcon,
selectedIcon: reportSelectedIcon
},
{
icon: workIcon,
selectedIcon: workSelectedIcon
}
]
function normalizeRoute(path = '') {
return String(path || '').trim().replace(/^\/+/, '')
}
@ -67,34 +43,19 @@ function isUniIcon(icon) {
return String(icon || '').startsWith('uni-icons:')
}
function isUviewIcon(icon) {
return String(icon || '').startsWith('uview-plus:')
}
function getUniIconName(icon) {
return String(icon || '').replace(/^uni-icons:/, '').trim()
}
function resolveTabIcons(path, index) {
const route = normalizeRoute(path)
if (route === 'pages/index') {
return {
icon: homeIcon,
selectedIcon: homeSelectedIcon
}
}
if (route === 'pages/report') {
return {
icon: reportIcon,
selectedIcon: reportSelectedIcon
}
}
if (route === 'pages/work') {
return {
icon: workIcon,
selectedIcon: workSelectedIcon
}
}
return dynamicTabIconList[index % dynamicTabIconList.length]
function getUviewIconName(icon) {
return String(icon || '').replace(/^uview-plus:/, '').trim()
}
function resolveTabIconMeta(menu, index) {
function resolveTabIconMeta(menu) {
if (isUniIcon(menu?.icon)) {
return {
iconType: 'uni-icons',
@ -102,12 +63,18 @@ function resolveTabIconMeta(menu, index) {
}
}
const icons = resolveTabIcons(menu?.path, index)
if (isUviewIcon(menu?.icon)) {
return {
iconType: 'uview-plus',
iconName: getUviewIconName(menu.icon)
}
}
return {
iconType: 'image',
iconType: '',
iconName: '',
icon: icons.icon,
selectedIcon: icons.selectedIcon
icon: '',
selectedIcon: ''
}
}
@ -122,11 +89,11 @@ function getCurrentActiveIndex() {
}
const tabList = computed(() => {
const dynamicTabList = getTabBarMenus(menus.value)
.map((menu, index) => {
const iconMeta = resolveTabIconMeta(menu, index)
return getTabBarMenus(menus.value)
.map((menu) => {
const iconMeta = resolveTabIconMeta(menu)
return {
text: String(menu.name || menu.enName || '').trim() || `菜单${index + 1}`,
text: String(menu.name || menu.enName || '').trim(),
icon: iconMeta.icon,
selectedIcon: iconMeta.selectedIcon,
iconType: iconMeta.iconType,
@ -134,18 +101,6 @@ const tabList = computed(() => {
path: menu.path
}
})
return [
...dynamicTabList,
{
text: t('nav.mine'),
icon: mineIcon,
selectedIcon: mineSelectedIcon,
iconType: 'image',
iconName: '',
path: '/pages/mine'
}
]
})
onMounted(() => {
@ -217,4 +172,7 @@ watch(() => useUserStore().menus, () => {
.u-tabbar {
flex: none !important;
}
.u-tabbar-item__text{
margin-top: 0 !important;
}
</style>

Loading…
Cancel
Save