Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
9529735a
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
9529735a
编写于
9月 02, 2021
作者:
D
Drjingfubo
提交者:
GitHub
9月 02, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(tabbar): 新增支持自定义图片链接 (#620)
* fix(tabbar): 新增支持自定义图片链接
上级
d166de8e
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
129 addition
and
5 deletion
+129
-5
src/packages/__VUE/tabbar/demo.vue
src/packages/__VUE/tabbar/demo.vue
+31
-1
src/packages/__VUE/tabbar/doc.md
src/packages/__VUE/tabbar/doc.md
+30
-1
src/packages/__VUE/tabbaritem/index.taro.vue
src/packages/__VUE/tabbaritem/index.taro.vue
+20
-1
src/packages/__VUE/tabbaritem/index.vue
src/packages/__VUE/tabbaritem/index.vue
+20
-1
src/sites/mobile-taro/vue/src/nav/pages/tabbar/index.vue
src/sites/mobile-taro/vue/src/nav/pages/tabbar/index.vue
+28
-1
未找到文件。
src/packages/__VUE/tabbar/demo.vue
浏览文件 @
9529735a
<
template
>
<div
class=
"demo full"
>
<h2>
基础用法
</h2>
<nut-tabbar
@
tab-switch=
"tabSwitch"
>
<nut-tabbar-item
tab-title=
"首页"
icon=
"home"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"分类"
icon=
"category"
></nut-tabbar-item>
...
...
@@ -8,9 +9,38 @@
<nut-tabbar-item
tab-title=
"购物车"
icon=
"cart"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"我的"
icon=
"my"
></nut-tabbar-item>
</nut-tabbar>
<h2>
自定义图片
</h2>
<nut-tabbar
@
tab-switch=
"tabSwitch"
>
<nut-tabbar-item
tab-title=
"首页"
img=
"http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg"
activeImg=
"http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"分类"
img=
"http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
activeImg=
"http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"发现"
img=
"http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
activeImg=
"http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"购物车"
img=
"http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
activeImg=
"http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"我的"
img=
"http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
activeImg=
"http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg"
></nut-tabbar-item>
</nut-tabbar>
<h2>
自定义选中
</h2>
<nut-tabbar
v-model:visible=
"active"
>
<nut-tabbar
v-model:visible=
"active"
size=
"18px"
>
<nut-tabbar-item
tab-title=
"首页"
icon=
"home"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"分类"
icon=
"category"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"发现"
icon=
"find"
></nut-tabbar-item>
...
...
src/packages/__VUE/tabbar/doc.md
浏览文件 @
9529735a
...
...
@@ -42,6 +42,32 @@ setup() {
},
```
### 自定义图片链接
```
html
<nut-tabbar
@
tab-switch=
"tabSwitch"
>
<nut-tabbar-item
tab-title=
"首页"
img=
'http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg'
activeImg=
'http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg'
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"分类"
img=
"http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
activeImg=
'http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg'
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"发现"
img=
"http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
activeImg=
'http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg'
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"购物车"
img=
"http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
activeImg=
'http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg'
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"我的"
img=
"http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
activeImg=
'http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg'
></nut-tabbar-item>
</nut-tabbar>
```
### 自定义选中
```
html
...
...
@@ -119,6 +145,7 @@ setup() {
|-----------------|--------------------|--------|---------|
| v-model:visible | 选中标签的索引值 | number | 0 |
| bottom | 是否固定在页面底部 | Booble | false |
| size | icon的尺寸/图片的宽高 | string | '20px' |
| unactive-color | icon未激活的颜色 | string | #7d7e80 |
| active-color | icon激活的颜色 | string | #1989fa |
...
...
@@ -127,7 +154,9 @@ setup() {
| 字段 | 说明 | 类型 | 默认值 |
|-----------|-------------------------------------------|--------|--------|
| tab-title | 标签页的标题 | String | -- |
| icon | 标签页显示的
[
图标名称
](
#/icon
)
或图片链接 | String | -- |
| icon | 标签页显示的
[
图标名称
](
#/icon
)
| String | -- |
| img | 标签页显示图片链接 | String | -- |
| activeImg | 激活以后的标签页显示图片链接(同一个item中icon和img只能选择一个) | String | -- |
| href | 标签页的跳转链接 | String | -- |
| num | 页签右上角的数字角标,超出99之后为99+ | Number | -- |
...
...
src/packages/__VUE/tabbaritem/index.taro.vue
浏览文件 @
9529735a
...
...
@@ -29,10 +29,21 @@
:class-prefix=
"classPrefix"
></nut-icon>
</view>
<div
v-if=
"!icon && activeImg"
class=
"nut-tabbar-item_icon-box_icon"
:style=
"
{
backgroundImage: `url(${
state.active == state.index ? activeImg : img
})`,
width: state.size,
height: state.size
}"
>
</div>
<view
:class=
"[
'nut-tabbar-item_icon-box_nav-word',
{ 'nut-tabbar-item_icon-box_big-word': !icon }
{ 'nut-tabbar-item_icon-box_big-word': !icon
&&
!activeImg
}
]"
>
{{
tabTitle
}}
</view
>
...
...
@@ -72,6 +83,14 @@ export default create({
type
:
String
,
default
:
''
},
activeImg
:
{
type
:
String
,
default
:
''
},
img
:
{
type
:
String
,
default
:
''
},
classPrefix
:
{
type
:
String
,
default
:
'
nut-icon
'
...
...
src/packages/__VUE/tabbaritem/index.vue
浏览文件 @
9529735a
...
...
@@ -29,10 +29,21 @@
:class-prefix=
"classPrefix"
></nut-icon>
</view>
<div
v-if=
"!icon && activeImg"
class=
"nut-tabbar-item_icon-box_icon"
:style=
"
{
backgroundImage: `url(${
state.active == state.index ? activeImg : img
})`,
width: state.size,
height: state.size
}"
>
</div>
<view
:class=
"[
'nut-tabbar-item_icon-box_nav-word',
{ 'nut-tabbar-item_icon-box_big-word': !icon }
{ 'nut-tabbar-item_icon-box_big-word': !icon
&&
!activeImg
}
]"
>
{{
tabTitle
}}
</view
>
...
...
@@ -72,6 +83,14 @@ export default create({
type
:
String
,
default
:
''
},
activeImg
:
{
type
:
String
,
default
:
''
},
img
:
{
type
:
String
,
default
:
''
},
classPrefix
:
{
type
:
String
,
default
:
'
nut-icon
'
...
...
src/sites/mobile-taro/vue/src/nav/pages/tabbar/index.vue
浏览文件 @
9529735a
...
...
@@ -8,7 +8,34 @@
<nut-tabbar-item
tab-title=
"购物车"
icon=
"cart"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"我的"
icon=
"my"
></nut-tabbar-item>
</nut-tabbar>
<h2>
自定义图片
</h2>
<nut-tabbar
@
tab-switch=
"tabSwitch"
>
<nut-tabbar-item
tab-title=
"首页"
img=
"http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg"
activeImg=
"http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"分类"
img=
"http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
activeImg=
"http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"发现"
img=
"http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
activeImg=
"http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"购物车"
img=
"http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
activeImg=
"http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"我的"
img=
"http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
activeImg=
"http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg"
></nut-tabbar-item>
</nut-tabbar>
<h2>
自定义选中
</h2>
<nut-tabbar
v-model:visible=
"active"
>
<nut-tabbar-item
tab-title=
"首页"
icon=
"home"
></nut-tabbar-item>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录