Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
c069309c
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,发现更多精彩内容 >>
提交
c069309c
编写于
3月 15, 2021
作者:
richard_1015
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: review tabbar
上级
69f2662f
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
76 addition
and
58 deletion
+76
-58
src/packages/tabbar/demo.vue
src/packages/tabbar/demo.vue
+2
-2
src/packages/tabbar/doc.md
src/packages/tabbar/doc.md
+50
-42
src/packages/tabbar/index.scss
src/packages/tabbar/index.scss
+1
-1
src/packages/tabbaritem/index.scss
src/packages/tabbaritem/index.scss
+1
-1
src/packages/toast/demo.vue
src/packages/toast/demo.vue
+9
-7
src/packages/toast/index.vue
src/packages/toast/index.vue
+4
-0
src/styles/variables.scss
src/styles/variables.scss
+9
-5
未找到文件。
src/packages/tabbar/demo.vue
浏览文件 @
c069309c
...
...
@@ -32,7 +32,7 @@
</nut-tabbar>
<h2>
自定义颜色
</h2>
<nut-tabbar
unactive
Color=
"#7d7e80"
activeC
olor=
"#1989fa"
>
<nut-tabbar
unactive
-color=
"#7d7e80"
active-c
olor=
"#1989fa"
>
<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>
...
...
@@ -40,7 +40,7 @@
<nut-tabbar-item
tab-title=
"我的"
icon=
"my"
></nut-tabbar-item>
</nut-tabbar>
<h2>
三个icon的tabbar
</h2>
<nut-tabbar
unactive
Color=
"#7d7e80"
activeC
olor=
"#1989fa"
>
<nut-tabbar
unactive
-color=
"#7d7e80"
active-c
olor=
"#1989fa"
>
<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/tabbar/doc.md
浏览文件 @
c069309c
# Tabbar
列表
组件
# Tabbar
标签栏
组件
### 介绍
XXXXXX
底部导航常用场景
### 安装
```
javascript
import
{
createApp
}
from
'
vue
'
;
import
{
Tabbar
}
from
'
@nutui/nutui
'
;
import
{
Tabbar
,
Icon
}
from
'
@nutui/nutui
'
;
const
app
=
createApp
();
app
.
use
(
Tabbar
);
app
.
use
(
Tabbar
)
.
use
(
Icon
)
;
```
...
...
@@ -29,34 +29,34 @@ app.use(Tabbar);
```
```
javascript
setup
()
{
function
tabSwitch
(
item
:
object
,
index
:
number
)
{
console
.
log
(
item
,
index
);
}
return
{
tabSwitch
,
};
},
setup
()
{
function
tabSwitch
(
item
:
object
,
index
:
number
)
{
console
.
log
(
item
,
index
);
}
return
{
tabSwitch
,
};
},
```
### 自定义选中
```
html
<nut-tabbar
v-model:show=
active
>
<nut-tabbar-item
tab-title=
"首页"
icon=
"home"
num=
"11"
></nut-tabbar-item>
<nut-tabbar
v-model:show=
"active"
>
<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>
<nut-tabbar-item
tab-title=
"购物车"
icon=
"cart"
num=
"110"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"购物车"
icon=
"cart"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"我的"
icon=
"my"
></nut-tabbar-item>
</nut-tabbar>
```
```
javascript
setup
()
{
const
active
=
ref
(
2
)
return
{
active
};
},
setup
()
{
const
active
=
ref
(
2
)
return
{
active
};
},
```
### 徽标提示
...
...
@@ -72,7 +72,7 @@ app.use(Tabbar);
### 自定义颜色
```
html
<nut-tabbar
unactive
Color=
"#7d7e80"
activeC
olor=
"#1989fa"
>
<nut-tabbar
unactive
-color=
"#7d7e80"
active-c
olor=
"#1989fa"
>
<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>
...
...
@@ -83,7 +83,7 @@ app.use(Tabbar);
### 三个图标的标签栏
```
html
<nut-tabbar
unactive
Color=
"#7d7e80"
activeC
olor=
"#1989fa"
>
<nut-tabbar
unactive
-color=
"#7d7e80"
active-c
olor=
"#1989fa"
>
<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>
...
...
@@ -92,40 +92,48 @@ app.use(Tabbar);
### 固定底部,可自由跳转
```
html
<nut-tabbar
unactiveColor=
"#7d7e80"
activeColor=
"#1989fa
"
>
<nut-tabbar-item
tab-title=
"首页"
icon=
"home"
></nut-tabbar-item>
<nut-tabbar
:bottom=
"true
"
>
<nut-tabbar-item
tab-title=
"首页"
href=
""
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>
<nut-tabbar-item
tab-title=
"购物车"
href=
"https://m.jd.com"
icon=
"cart"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"我的"
icon=
"my"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"购物车"
href=
"https://m.jd.com"
icon=
"cart"
></nut-tabbar-item>
<nut-tabbar-item
tab-title=
"我的"
href=
"######"
icon=
"my"
></nut-tabbar-item>
</nut-tabbar>
```
### Prop
### nut-tabbar
| 字段
| 说明 | 类型 | 默认值
|-----
| ----- | ----- | -----
| bottom
| 是否固定在页面底部 |Booble|false
|
| show
| 选中标签的索引值 |number|0
|
| unactive-color | icon未激活的颜色
|string|#7d7e80
|
| active-color
| icon激活的颜色 |string|#1989fa
|
| 字段
| 说明 | 类型 | 默认值 |
|-----
-----------|--------------------|--------|---------|
| bottom
| 是否固定在页面底部 | Booble | false
|
| show
| 选中标签的索引值 | number | 0
|
| unactive-color | icon未激活的颜色
| string | #7d7e80
|
| active-color
| icon激活的颜色 | string | #1989fa
|
### tabbar-item
| 字段
| 说明 | 类型 | 默认值
|-----
| ----- | ----- | -----
| tab-title | 标签页的标题
| String | --
| icon
| 标签页显示的icon | String | --
| href
| 标签页的跳转链接 | String | --
| num
|页签右上角的数字角标,超出99之后为99+|Number|--
| 字段
| 说明 | 类型 | 默认值 |
|-----
------|---------------------------------------|--------|--------|
| tab-title | 标签页的标题
| String | -- |
| icon
| 标签页显示的
[
图标名称
](
#/icon
)
或图片链接 | String | -- |
| href
| 标签页的跳转链接 | String | -- |
| num
| 页签右上角的数字角标,超出99之后为99+ | Number | -- |
### Event
| 事件名称
| 说明 | 回调参数
|-----
| ----- | -----
| tab
Switch | 切换页签时触发事件 | 点击的数据和索引值
| 事件名称
| 说明 | 回调参数 |
|-----
------|--------------------|--------------------|
| tab
-switch | 切换页签时触发事件 | 点击的数据和索引值 |
src/packages/tabbar/index.scss
浏览文件 @
c069309c
...
...
@@ -46,7 +46,7 @@
.tips
{
position
:
absolute
;
background
:
rgba
(
250
,
44
,
25
,
1
)
;
background
:
$tabbar-active-color
;
border
:
1px
solid
rgba
(
255
,
255
,
255
,
1
);
border-radius
:
7px
;
text-align
:
center
;
...
...
src/packages/tabbaritem/index.scss
浏览文件 @
c069309c
...
...
@@ -15,7 +15,7 @@
.tips
{
position
:
absolute
;
background
:
rgba
(
250
,
44
,
25
,
1
)
;
background
:
$tabbar-active-color
;
border
:
1px
solid
rgba
(
255
,
255
,
255
,
1
);
border-radius
:
7px
;
text-align
:
center
;
...
...
src/packages/toast/demo.vue
浏览文件 @
c069309c
...
...
@@ -33,28 +33,30 @@
</
template
>
<
script
>
import
{
getCurrentInstance
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
import
{
Toast
}
from
'
./index.ts
'
;
const
{
createDemo
}
=
createComponent
(
'
toast
'
);
export
default
createDemo
({
setup
()
{
const
{
ctx
}
=
getCurrentInstance
();
const
textToast
=
msg
=>
{
T
oast
.
text
(
msg
,
{
duration
:
100000
});
ctx
.
$t
oast
.
text
(
msg
,
{
duration
:
100000
});
};
const
successToast
=
msg
=>
{
Toast
.
success
(
msg
);
ctx
.
$toast
.
success
(
msg
,
{
duration
:
100000
}
);
};
const
errorToast
=
msg
=>
{
T
oast
.
fail
(
msg
);
ctx
.
$t
oast
.
fail
(
msg
);
};
const
warningToast
=
msg
=>
{
T
oast
.
warn
(
msg
);
ctx
.
$t
oast
.
warn
(
msg
);
};
const
loadingToast
=
msg
=>
{
T
oast
.
loading
(
msg
,
{
duration
:
0
,
id
:
'
test
'
});
ctx
.
$t
oast
.
loading
(
msg
,
{
duration
:
0
,
id
:
'
test
'
});
setTimeout
(()
=>
{
T
oast
.
success
(
'
加载完成
'
,
{
id
:
'
test
'
,
duration
:
2000
});
ctx
.
$t
oast
.
success
(
'
加载完成
'
,
{
id
:
'
test
'
,
duration
:
2000
});
},
2000
);
};
return
{
...
...
src/packages/toast/index.vue
浏览文件 @
c069309c
...
...
@@ -28,7 +28,11 @@
import
{
toRefs
,
toRef
,
reactive
,
computed
,
watch
,
onMounted
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
create
}
=
createComponent
(
'
toast
'
);
import
Icon
from
'
@/packages/icon/index.vue
'
;
export
default
create
({
components
:
{
[
Icon
.
name
]:
Icon
},
props
:
{
id
:
String
,
msg
:
String
,
...
...
src/styles/variables.scss
浏览文件 @
c069309c
...
...
@@ -49,10 +49,10 @@ $button-block-line-height: 46px;
$button-default-font-size
:
$font-size-2
;
$button-disabled-opacity
:
0
.68
;
$button-primary-color
:
$white
;
$button-primary-border-color
:
rgba
(
250
,
44
,
25
,
1
)
;
$button-primary-border-color
:
$primary-color
;
$button-primary-background-color
:
linear-gradient
(
135deg
,
rgba
(
250
,
44
,
25
,
1
)
0%
,
$primary-color
0%
,
rgba
(
250
,
63
,
25
,
1
)
45%
,
rgba
(
250
,
89
,
25
,
1
)
83%
,
rgba
(
250
,
100
,
25
,
1
)
100%
...
...
@@ -75,8 +75,8 @@ $button-success-background-color: linear-gradient(
);
$button-danger-color
:
$white
;
$button-danger-border-color
:
rgba
(
250
,
44
,
25
,
1
)
;
$button-danger-background-color
:
rgba
(
250
,
44
,
25
,
1
)
;
$button-danger-border-color
:
$primary-color
;
$button-danger-background-color
:
$primary-color
;
$button-warning-color
:
$white
;
$button-warning-border-color
:
rgba
(
255
,
158
,
13
,
1
);
$button-warning-background-color
:
linear-gradient
(
...
...
@@ -184,7 +184,7 @@ $notify-height: 44px;
$notify-base-background-color
:
linear-gradient
(
135deg
,
rgba
(
250
,
44
,
25
,
1
)
0%
,
$primary-color
0%
,
rgba
(
250
,
63
,
25
,
1
)
45%
,
rgba
(
250
,
89
,
25
,
1
)
83%
,
rgba
(
250
,
100
,
25
,
1
)
100%
...
...
@@ -208,6 +208,10 @@ $notify-warning-background-color: linear-gradient(
rgba
(
255
,
154
,
13
,
1
)
100%
);
// tabbar
$tabbar-active-color
:
$primary-color
;
view-block
{
display
:
block
;
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录