Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
菜鸟程序猿_c
uni-app
提交
cfcf773c
U
uni-app
项目概览
菜鸟程序猿_c
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
cfcf773c
编写于
5月 06, 2022
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: vue3 H5 tabbar 支持 iconfont
上级
08b45f6b
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
107 addition
and
5 deletion
+107
-5
packages/shims-uni-app.d.ts
packages/shims-uni-app.d.ts
+10
-0
packages/uni-h5/src/framework/components/layout/tabBar.tsx
packages/uni-h5/src/framework/components/layout/tabBar.tsx
+86
-4
packages/uni-h5/src/service/api/ui/tabBar.ts
packages/uni-h5/src/service/api/ui/tabBar.ts
+7
-1
packages/uni-h5/style/framework/tabBar.css
packages/uni-h5/style/framework/tabBar.css
+4
-0
未找到文件。
packages/shims-uni-app.d.ts
浏览文件 @
cfcf773c
...
...
@@ -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
...
...
packages/uni-h5/src/framework/components/layout/tabBar.tsx
浏览文件 @
cfcf773c
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
)
}
</
div
>
)
}
...
...
@@ -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
(
<
div
class
=
"uni-tabbar__bd"
style
=
{
{
height
:
height
}
}
>
{
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
)
}
</
div
>
)
...
...
@@ -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
(
<
div
class
=
{
clazz
}
style
=
{
style
}
>
{
type
!==
'
midButton
'
&&
(
<
div
class
=
"uni-tabbar__iconfont"
style
=
{
iconfontStyle
}
>
{
iconfontText
}
</
div
>
)
}
{
redDot
&&
createTabBarItemRedDotTsx
(
tabBarItem
.
badge
)
}
</
div
>
)
}
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(
/>
)
}
</
div
>
{
createTabBarItemBdTsx
(
color
,
iconPath
,
midButton
,
tabBar
)
}
{
createTabBarItemBdTsx
(
color
,
iconPath
,
iconfontText
,
iconfontColor
,
midButton
,
tabBar
)
}
</
div
>
)
}
packages/uni-h5/src/service/api/ui/tabBar.ts
浏览文件 @
cfcf773c
...
...
@@ -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
'
,
...
...
packages/uni-h5/style/framework/tabBar.css
浏览文件 @
cfcf773c
...
...
@@ -83,6 +83,10 @@ uni-tabbar {
height
:
100%
;
}
.uni-tabbar__iconfont
{
font-family
:
'UniTabbarIconFont'
;
}
.uni-tabbar__label
{
position
:
relative
;
text-align
:
center
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录