From cfcf773ccf45ba59868c25f81b8feccfc4129282 Mon Sep 17 00:00:00 2001 From: handongxun Date: Fri, 6 May 2022 16:05:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20vue3=20H5=20tabbar=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=20iconfont?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/shims-uni-app.d.ts | 10 +++ .../framework/components/layout/tabBar.tsx | 90 ++++++++++++++++++- packages/uni-h5/src/service/api/ui/tabBar.ts | 8 +- packages/uni-h5/style/framework/tabBar.css | 4 + 4 files changed, 107 insertions(+), 5 deletions(-) diff --git a/packages/shims-uni-app.d.ts b/packages/shims-uni-app.d.ts index ceeb4cd1a..17e2f4c8f 100644 --- a/packages/shims-uni-app.d.ts +++ b/packages/shims-uni-app.d.ts @@ -284,6 +284,15 @@ declare namespace UniApp { redDot?: boolean badge?: string visible?: boolean + iconfont?: TabBarItemIconfontOptions + } + + interface TabBarItemIconfontOptions { + text: string + selectedText: string + fontSize?: string + color?: string + selectedColor?: string } interface TabBarNormalItemOptions extends TabBarItemBaseOptions { @@ -307,6 +316,7 @@ declare namespace UniApp { selectedColor: string backgroundColor: string borderStyle?: 'black' | 'white' + iconfontSrc?: string list: TabBarItemOptions[] blurEffect?: 'none' | 'dark' | 'extralight' | 'light' fontSize?: string diff --git a/packages/uni-h5/src/framework/components/layout/tabBar.tsx b/packages/uni-h5/src/framework/components/layout/tabBar.tsx index fb16e6d4b..d8dc6cd2c 100644 --- a/packages/uni-h5/src/framework/components/layout/tabBar.tsx +++ b/packages/uni-h5/src/framework/components/layout/tabBar.tsx @@ -1,4 +1,4 @@ -import { watch, watchEffect, computed, ref, Ref } from 'vue' +import { watch, watchEffect, computed, ref, Ref, onMounted } from 'vue' import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router' import { invokeHook, updatePageCssVar } from '@dcloudio/uni-core' import { @@ -10,8 +10,11 @@ import { defineSystemComponent } from '@dcloudio/uni-components' import { getRealPath } from '../../../platform' import { useTabBar } from '../../setup/state' import { cssBackdropFilter } from '../../../service/api/base/canIUse' +import { loadFontFace } from '../../../service/api/ui/loadFontFace' import { normalizeWindowBottom } from '../../../helpers/cssVar' +const UNI_TABBAR_ICON_FONT = 'UniTabbarIconFont' + export default /*#__PURE__*/ defineSystemComponent({ name: 'TabBar', setup() { @@ -21,6 +24,16 @@ export default /*#__PURE__*/ defineSystemComponent({ useTabBarCssVar(tabBar) const onSwitchTab = useSwitchTab(useRoute(), tabBar, visibleList) const { style, borderStyle, placeholderStyle } = useTabBarStyle(tabBar) + + onMounted(() => { + if (tabBar.iconfontSrc) { + loadFontFace({ + family: UNI_TABBAR_ICON_FONT, + source: `url("${tabBar.iconfontSrc}")`, + }) + } + }) + return () => { const tabBarItemsTsx = createTabBarItemsTsx( tabBar, @@ -183,10 +196,22 @@ function createTabBarItemsTsx( const textColor = selected ? selectedColor : color const iconPath = (selected ? item.selectedIconPath || item.iconPath : item.iconPath) || '' + const iconfontText = item.iconfont + ? selected + ? item.iconfont.selectedText || item.iconfont.text + : item.iconfont.text + : undefined + const iconfontColor = item.iconfont + ? selected + ? item.iconfont.selectedColor || item.iconfont.color + : item.iconfont.color + : undefined if (!__UNI_FEATURE_TABBAR_MIDBUTTON__) { return createTabBarItemTsx( textColor, iconPath, + iconfontText, + iconfontColor, item, tabBar, index, @@ -197,6 +222,8 @@ function createTabBarItemsTsx( ? createTabBarMidButtonTsx( textColor, iconPath, + iconfontText, + iconfontColor, item, tabBar, index, @@ -205,6 +232,8 @@ function createTabBarItemsTsx( : createTabBarItemTsx( textColor, iconPath, + iconfontText, + iconfontColor, item, tabBar, index, @@ -216,6 +245,8 @@ function createTabBarItemsTsx( function createTabBarItemTsx( color: string, iconPath: string, + iconfontText: string | undefined, + iconfontColor: string | undefined, tabBarItem: UniApp.TabBarItemOptions, tabBar: UniApp.TabBarOptions, index: number, @@ -227,7 +258,14 @@ function createTabBarItemTsx( class="uni-tabbar__item" onClick={onSwitchTab(tabBarItem, index)} > - {createTabBarItemBdTsx(color, iconPath || '', tabBarItem, tabBar)} + {createTabBarItemBdTsx( + color, + iconPath || '', + iconfontText, + iconfontColor, + tabBarItem, + tabBar + )} ) } @@ -235,13 +273,22 @@ function createTabBarItemTsx( function createTabBarItemBdTsx( color: string, iconPath: string, + iconfontText: string | undefined, + iconfontColor: string | undefined, tabBarItem: UniApp.TabBarItemOptions, tabBar: UniApp.TabBarOptions ) { const { height } = tabBar return (
- {iconPath && createTabBarItemIconTsx(iconPath, tabBarItem, tabBar)} + {iconfontText + ? createTabBarItemIconfontTsx( + iconfontText, + iconfontColor || BLUR_EFFECT_COLOR_DARK, + tabBarItem, + tabBar + ) + : iconPath && createTabBarItemIconTsx(iconPath, tabBarItem, tabBar)} {tabBarItem.text && createTabBarItemTextTsx(color, tabBarItem, tabBar)}
) @@ -264,6 +311,32 @@ function createTabBarItemIconTsx( ) } +function createTabBarItemIconfontTsx( + iconfontText: string, + iconfontColor: string, + tabBarItem: UniApp.TabBarItemOptions, + tabBar: UniApp.TabBarOptions +) { + const { type, text, redDot } = tabBarItem + const { iconWidth } = tabBar + const clazz = 'uni-tabbar__icon' + (text ? ' uni-tabbar__icon__diff' : '') + const style = { width: iconWidth, height: iconWidth } + const iconfontStyle = { + fontSize: tabBarItem.iconfont?.fontSize || iconWidth, + color: iconfontColor, + } + return ( +
+ {type !== 'midButton' && ( +
+ {iconfontText} +
+ )} + {redDot && createTabBarItemRedDotTsx(tabBarItem.badge)} +
+ ) +} + function createTabBarItemTextTsx( color: string, tabBarItem: UniApp.TabBarItemOptions, @@ -293,6 +366,8 @@ function createTabBarItemRedDotTsx(badge?: string) { function createTabBarMidButtonTsx( color: string, iconPath: string, + iconfontText: string | undefined, + iconfontColor: string | undefined, midButton: UniApp.TabBarMidButtonOptions, tabBar: UniApp.TabBarOptions, index: number, @@ -323,7 +398,14 @@ function createTabBarMidButtonTsx( /> )} - {createTabBarItemBdTsx(color, iconPath, midButton, tabBar)} + {createTabBarItemBdTsx( + color, + iconPath, + iconfontText, + iconfontColor, + midButton, + tabBar + )} ) } diff --git a/packages/uni-h5/src/service/api/ui/tabBar.ts b/packages/uni-h5/src/service/api/ui/tabBar.ts index cbb546ee4..e05c1bc9f 100644 --- a/packages/uni-h5/src/service/api/ui/tabBar.ts +++ b/packages/uni-h5/src/service/api/ui/tabBar.ts @@ -36,7 +36,13 @@ import { getRouteOptions } from '@dcloudio/uni-core' import { addLeadingSlash } from '@dcloudio/uni-shared' import { useTabBar } from '../../../framework/setup/state' -const setTabBarItemProps = ['text', 'iconPath', 'selectedIconPath', 'visible'] +const setTabBarItemProps = [ + 'text', + 'iconPath', + 'iconfont', + 'selectedIconPath', + 'visible', +] const setTabBarStyleProps = [ 'color', 'selectedColor', diff --git a/packages/uni-h5/style/framework/tabBar.css b/packages/uni-h5/style/framework/tabBar.css index 763be5f79..c85d12756 100644 --- a/packages/uni-h5/style/framework/tabBar.css +++ b/packages/uni-h5/style/framework/tabBar.css @@ -83,6 +83,10 @@ uni-tabbar { height: 100%; } +.uni-tabbar__iconfont { + font-family: 'UniTabbarIconFont'; +} + .uni-tabbar__label { position: relative; text-align: center; -- GitLab