Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
955a9ad3
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,发现更多精彩内容 >>
提交
955a9ad3
编写于
4月 13, 2021
作者:
A
ailululu
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: steps
上级
6cebfe69
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
304 addition
and
58 deletion
+304
-58
src/packages/step/index.scss
src/packages/step/index.scss
+81
-5
src/packages/step/index.vue
src/packages/step/index.vue
+32
-5
src/packages/steps/demo.vue
src/packages/steps/demo.vue
+41
-33
src/packages/steps/doc.md
src/packages/steps/doc.md
+90
-0
src/packages/steps/index.vue
src/packages/steps/index.vue
+60
-15
未找到文件。
src/packages/step/index.scss
浏览文件 @
955a9ad3
...
@@ -28,13 +28,21 @@
...
@@ -28,13 +28,21 @@
font-size
:
13px
;
font-size
:
13px
;
// border-color: #909CA4;
// border-color: #909CA4;
z-index
:
1
;
z-index
:
1
;
.nut-icon
{
width
:
100%
;
height
:
100%
;
}
&
.is-text
{
&
.is-text
{
border-radius
:
50%
;
border-radius
:
50%
;
border-width
:
1px
;
border-width
:
1px
;
border-style
:
solid
;
border-style
:
solid
;
}
}
}
&
.is-icon
{
&
-inner
{
border-radius
:
50%
;
border-width
:
1px
;
border-style
:
solid
;
background-color
:
transparent
;
}
}
}
&
-main
{
&
-main
{
display
:
inline-block
;
display
:
inline-block
;
...
@@ -66,9 +74,15 @@
...
@@ -66,9 +74,15 @@
.nut-step-icon.is-text
{
.nut-step-icon.is-text
{
background-color
:
#fff
;
background-color
:
#fff
;
}
}
.nut-step-icon.is-icon
{
background-color
:
#fff
;
}
.nut-step-line
{
.nut-step-line
{
background
:
#3790ff
;
background
:
#3790ff
;
}
}
.nut-step-title
{
color
:
#3790ff
;
}
}
}
&
.nut-step-process
{
&
.nut-step-process
{
.nut-step-head
{
.nut-step-head
{
...
@@ -78,8 +92,11 @@
...
@@ -78,8 +92,11 @@
.nut-step-icon.is-text
{
.nut-step-icon.is-text
{
background-color
:
#3790ff
;
background-color
:
#3790ff
;
}
}
.nut-step-line
{
.nut-step-icon.is-icon
{
background
:
#3790ff
;
background-color
:
#3790ff
;
}
.nut-step-title
{
color
:
#3790ff
;
}
}
}
}
&
.nut-step-wait
{
&
.nut-step-wait
{
...
@@ -90,6 +107,12 @@
...
@@ -90,6 +107,12 @@
.nut-step-icon.is-text
{
.nut-step-icon.is-text
{
background-color
:
#fff
;
background-color
:
#fff
;
}
}
.nut-step-icon.is-icon
{
background-color
:
#fff
;
}
.nut-step-content
{
color
:
#909ca4
;
}
}
}
&
.nut-step-error
{
&
.nut-step-error
{
.nut-step-head
{
.nut-step-head
{
...
@@ -99,6 +122,9 @@
...
@@ -99,6 +122,9 @@
.nut-step-icon.is-text
{
.nut-step-icon.is-text
{
background-color
:
#fa2c19
;
background-color
:
#fa2c19
;
}
}
.nut-step-icon.is-icon
{
background-color
:
#fa2c19
;
}
.nut-step-line
{
.nut-step-line
{
background
:
#3790ff
;
background
:
#3790ff
;
}
}
...
@@ -118,7 +144,57 @@
...
@@ -118,7 +144,57 @@
}
}
.nut-step-main
{
.nut-step-main
{
display
:
inline-block
;
display
:
inline-block
;
padding-left
:
10
%
;
padding-left
:
6
%
;
text-align
:
left
;
text-align
:
left
;
}
}
&
.nut-steps-dot
{
.nut-step-head
{
margin-top
:
7px
;
margin-bottom
:
0
;
}
.nut-step-line
{
top
:
7px
;
left
:
50%
;
right
:
-50%
;
}
.nut-step-icon
{
width
:
8px
;
height
:
8px
;
background
:
#3790ff
;
border-radius
:
50%
;
box-sizing
:
content-box
;
}
.nut-step-wait
{
.nut-step-icon
{
background-color
:
#959fb1
;
}
.nut-step-content
{
color
:
#909ca4
;
}
}
.nut-step-finish
{
.nut-step-icon
{
background-color
:
#3790ff
;
}
}
.nut-step-process
{
.nut-step-icon
{
position
:
relative
;
background-color
:
#3790ff
;
&
:before
{
content
:
''
;
display
:
inline-block
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
margin-left
:
-7px
;
margin-top
:
-7px
;
width
:
14px
;
height
:
14px
;
background-color
:
rgba
(
55
,
144
,
255
,
0
.23
);
border-radius
:
50%
;
}
}
}
}
}
}
src/packages/step/index.vue
浏览文件 @
955a9ad3
...
@@ -2,12 +2,16 @@
...
@@ -2,12 +2,16 @@
<view
:class=
"classes"
>
<view
:class=
"classes"
>
<view
class=
"nut-step-head"
>
<view
class=
"nut-step-head"
>
<view
class=
"nut-step-line"
></view>
<view
class=
"nut-step-line"
></view>
<view
class=
"nut-step-icon"
:class=
"[icon ? 'is-icon' : 'is-text']"
>
<view
class=
"nut-step-icon"
:class=
"[!state.dot ? (icon ? 'is-icon' : 'is-text') : '']"
>
<template
v-if=
"icon"
>
<template
v-if=
"icon"
>
<nut-icon
class=
"nut-step-icon-inner"
:class=
"icon"
/>
<nut-icon
class=
"nut-step-icon-inner"
:class=
"icon"
/>
</
template
>
</
template
>
<
template
v-else-if=
"state.dot"
></
template
>
<
template
v-else
>
<
template
v-else
>
<view
class=
"nut-step-inner"
>
11
</view>
<view
class=
"nut-step-inner"
>
{{
state
.
index
}}
</view>
</
template
>
</
template
>
</view>
</view>
</view>
</view>
...
@@ -23,7 +27,7 @@
...
@@ -23,7 +27,7 @@
</template>
</template>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
reactive
,
computed
,
nextTick
,
ref
}
from
'
vue
'
;
import
{
reactive
,
computed
,
inject
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
create
,
componentName
}
=
createComponent
(
'
step
'
);
const
{
create
,
componentName
}
=
createComponent
(
'
step
'
);
...
@@ -40,16 +44,39 @@ export default create({
...
@@ -40,16 +44,39 @@ export default create({
icon
:
{
icon
:
{
type
:
String
,
type
:
String
,
default
:
null
default
:
null
},
status
:
{
type
:
String
,
default
:
null
},
data
:
{
type
:
String
,
default
:
null
}
}
},
},
setup
(
props
,
{
emit
,
slots
})
{
setup
(
props
,
context
)
{
const
steps
:
any
=
inject
(
'
stepsParent
'
);
const
defaults
=
context
.
slots
?.
default
();
console
.
log
(
'
defaults
'
,
context
.
slots
);
console
.
log
(
'
steps
'
,
steps
.
props
.
progressDot
);
const
state
=
reactive
({
data
:
[],
index
:
context
.
slots
.
default
()[
0
]?.
children
-
1
,
dot
:
steps
.
props
.
progressDot
});
console
.
log
(
'
dot
'
,
state
.
dot
);
// console.log('context', steps.state.steps[state.index])
const
classes
=
computed
(()
=>
{
const
classes
=
computed
(()
=>
{
const
prefixCls
=
componentName
;
const
prefixCls
=
componentName
;
return
{
return
{
[
prefixCls
]:
true
[
prefixCls
]:
true
,
[
props
.
status
?
'
nut-step-
'
+
props
.
status
:
steps
.
state
.
steps
[
state
.
index
].
currentStatus
]:
true
};
};
});
});
return
{
return
{
state
,
classes
classes
};
};
}
}
...
...
src/packages/steps/demo.vue
浏览文件 @
955a9ad3
...
@@ -2,55 +2,63 @@
...
@@ -2,55 +2,63 @@
<div
class=
"demo"
>
<div
class=
"demo"
>
<h2>
基本用法
</h2>
<h2>
基本用法
</h2>
<nut-steps
current=
"1"
>
<nut-steps
current=
"1"
>
<nut-step
class=
""
title=
"进行中"
>
1
</nut-step>
<nut-step
title=
"进行中"
>
1
</nut-step>
<nut-step
class=
"nut-step-process"
title=
"未开始"
>
2
</nut-step>
<nut-step
title=
"未开始"
>
2
</nut-step>
<nut-step
class=
""
title=
"未开始"
>
3
</nut-step>
<nut-step
title=
"未开始"
>
3
</nut-step>
</nut-steps>
</nut-steps>
<h2>
基本用法
</h2>
<h2>
标题和描述信息
</h2>
<nut-steps
current=
"2"
>
<nut-step
title=
"已完成"
content=
"步骤描述"
icon=
"nutui-iconfont nut-icon-wanshangshide"
>
1
</nut-step
>
<nut-step
title=
"进行中"
content=
"步骤描述"
>
2
</nut-step>
<nut-step
title=
"未开始"
content=
"步骤描述"
>
3
</nut-step>
</nut-steps>
<h2>
自定义图标
</h2>
<nut-steps
current=
"1"
>
<nut-steps
current=
"1"
>
<nut-step
class=
"nut-step-finish"
title=
"未开始"
>
1
</nut-step>
<nut-step
<nut-step
class=
"nut-step-process"
title=
"已完成"
title=
"进行中"
icon=
"nutui-iconfont nut-icon-wanshangshide"
content=
"这是一段很长很长很长的描述性文字"
status=
"error"
>
1
</nut-step
>
<nut-step
title=
"进行中"
icon=
"nutui-iconfont nut-icon-notice"
>
2
</nut-step
>
2
</nut-step
>
>
<nut-step
class=
"nut-step-wait"
title=
"未开始"
>
3
</nut-step>
<nut-step
class=
"nut-step-wait"
title=
"未开始"
icon=
"nutui-iconfont nut-icon-notice"
>
3
</nut-step
>
</nut-steps>
</nut-steps>
<h2>
自定义图标和颜色
</h2>
<h2>
竖向步骤条
</h2>
<div
class=
""
style=
"height: 300px"
>
<div
style=
"height: 300px"
>
<nut-steps>
<nut-steps
direction=
"vertical"
current=
"2"
>
<nut-step
<nut-step
class=
"nut-step-finish"
title=
"已完成"
title=
"已完成"
icon=
"nutui-iconfont nut-icon-wanshangshide"
icon=
"nutui-iconfont nut-icon-wanshangshide"
></nut-step>
content=
"您的订单已经打包完成,商品已发出"
>
1
</nut-step
>
<nut-step
title=
"进行中"
content=
"您的订单正在配送途中"
>
2
</nut-step>
<nut-step
<nut-step
class=
"nut-step-process"
title=
"未开始"
title=
"进行中"
content=
"收货地址为:北京市经济技术开发区科创十一街18号院京东大厦"
icon=
"nutui-iconfont nut-icon-notice"
>
3
</nut-step
>
2
</nut-step
>
>
<nut-step
class=
"nut-step-wait"
title=
"未开始"
content=
""
>
3
</nut-step>
</nut-steps>
</nut-steps>
</div>
</div>
<h2>
竖向步骤条
</h2>
<div
style=
"height: 300px"
>
<div
class=
""
style=
"height: 300px"
>
<nut-steps
direction=
"vertical"
progressDot
current=
"2"
>
<nut-steps
direction=
"vertical"
>
<nut-step
title=
"已完成"
content=
"您的订单已经打包完成,商品已发出"
<nut-step
class=
"nut-step-error"
title=
"已完成"
content=
"您的订单已经打包完成,商品已发出"
>
1
</nut-step
>
1
</nut-step
>
>
<nut-step
title=
"进行中"
content=
"您的订单正在配送途中"
>
2
</nut-step>
<nut-step
<nut-step
class=
"nut-step-process"
title=
"进行中"
content=
"您的订单正在配送途中"
>
2
</nut-step
>
<nut-step
class=
"nut-step-wait"
title=
"未开始"
title=
"未开始"
content=
"收货地址为:北京市经济技术开发区科创十一街18号院京东大厦"
content=
"收货地址为:北京市经济技术开发区科创十一街18号院京东大厦"
>
3
</nut-step
>
3
</nut-step
...
...
src/packages/steps/doc.md
0 → 100644
浏览文件 @
955a9ad3
# Steps 步骤条 组件
### 介绍
拆分展示某项流程的步骤,引导用户按流程完成任务或向用户展示当前状态。
### 安装
```
javascript
import
{
createApp
}
from
'
vue
'
;
import
{
Steps
}
from
'
@nutui/nutui
'
;
const
app
=
createApp
();
app
.
use
(
Steps
);
```
## 代码演示
### 基本用法
```
html
<nut-steps
current=
"1"
>
<nut-step
title=
"进行中"
>
1
</nut-step>
<nut-step
title=
"未开始"
>
2
</nut-step>
<nut-step
title=
"未开始"
>
3
</nut-step>
</nut-steps>
```
### 标题和描述信息
```
html
<nut-steps
current=
"2"
>
<nut-step
title=
"已完成"
content=
"步骤描述"
icon=
"nutui-iconfont nut-icon-wanshangshide"
>
1
</nut-step>
<nut-step
title=
"进行中"
content=
"步骤描述"
>
2
</nut-step>
<nut-step
title=
"未开始"
content=
"步骤描述"
>
3
</nut-step>
</nut-steps>
```
### 自定义图标
```
html
<nut-steps
current=
"1"
>
<nut-step
title=
"已完成"
icon=
"nutui-iconfont nut-icon-wanshangshide"
status=
"error"
>
1
</nut-step>
<nut-step
title=
"进行中"
icon=
"nutui-iconfont nut-icon-notice"
>
2
</nut-step>
<nut-step
class=
"nut-step-wait"
title=
"未开始"
icon=
"nutui-iconfont nut-icon-notice"
>
3
</nut-step>
</nut-steps>
```
### 竖向步骤条
```
html
<nut-steps
direction=
"vertical"
current=
"2"
>
<nut-step
title=
"已完成"
icon=
"nutui-iconfont nut-icon-wanshangshide"
content=
"您的订单已经打包完成,商品已发出"
>
1
</nut-step>
<nut-step
title=
"进行中"
content=
"您的订单正在配送途中"
>
2
</nut-step>
<nut-step
title=
"未开始"
content=
"收货地址为:北京市经济技术开发区科创十一街18号院京东大厦"
>
3
</nut-step>
</nut-steps>
```
### 点状步骤和垂直方向
```
html
<nut-steps
direction=
"vertical"
progressDot
current=
"2"
>
<nut-step
title=
"已完成"
content=
"您的订单已经打包完成,商品已发出"
>
1
</nut-step>
<nut-step
title=
"进行中"
content=
"您的订单正在配送途中"
>
2
</nut-step>
<nut-step
title=
"未开始"
content=
"收货地址为:北京市经济技术开发区科创十一街18号院京东大厦"
>
3
</nut-step>
</nut-steps>
```
## API
### Props
#### nut-steps
| 参数 | 说明 | 类型 | 默认值 |
| ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
| direction | 显示方向,
`horizontal`
,
`vertical`
| String | horizontal |
| current | 当前所在的步骤 | Number、String | 0 |
| progressDot | 点状步骤条 | Boolean | false |
#### nut-step
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ---------------------- | ------------ | ----------- |
| title | 流程步骤的标题 | String | 步骤 |
| content | 流程步骤的描述性文字 | String | 步骤描述 |
| icon | 图标 | String | - |
| status | 流程状态 | String | String、Number | "process"(可选值 "wait"、"process"、"finish"、"error" |
\ No newline at end of file
src/packages/steps/index.vue
浏览文件 @
955a9ad3
...
@@ -5,7 +5,14 @@
...
@@ -5,7 +5,14 @@
</
template
>
</
template
>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
toRefs
,
computed
,
onMounted
,
reactive
}
from
'
vue
'
;
import
{
provide
,
computed
,
onMounted
,
reactive
,
watch
,
onBeforeMount
}
from
'
vue
'
;
import
step
from
'
@/packages/step/index.vue
'
;
import
step
from
'
@/packages/step/index.vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
create
,
componentName
}
=
createComponent
(
'
steps
'
);
const
{
create
,
componentName
}
=
createComponent
(
'
steps
'
);
...
@@ -19,42 +26,73 @@ export default create({
...
@@ -19,42 +26,73 @@ export default create({
},
},
current
:
{
current
:
{
type
:
String
,
type
:
String
,
default
:
''
default
:
'
false
'
},
},
status
:
{
status
:
{
validator
(
value
)
{
validator
(
value
)
{
return
[
'
wait
'
,
'
process
'
,
'
finish
'
,
'
error
'
].
includes
(
value
);
return
[
'
wait
'
,
'
process
'
,
'
finish
'
,
'
error
'
].
includes
(
value
);
},
},
default
:
'
process
'
default
:
'
process
'
},
progressDot
:
{
type
:
Boolean
,
default
:
false
}
}
},
},
setup
(
props
,
{
emit
,
slots
})
{
setup
(
props
,
{
emit
,
slots
})
{
const
state
=
reactive
({
const
state
=
reactive
({
steps
:
{}
steps
:
{},
children
:
[]
});
});
const
classes
=
computed
(()
=>
{
const
classes
=
computed
(()
=>
{
const
prefixCls
=
componentName
;
const
prefixCls
=
componentName
;
return
{
return
{
[
prefixCls
]:
true
,
[
prefixCls
]:
true
,
[
'
nut-steps-
'
+
props
.
direction
]:
true
[
'
nut-steps-
'
+
props
.
direction
]:
true
,
[
props
.
progressDot
?
'
nut-steps-dot
'
:
''
]:
true
};
};
});
});
onBeforeMount
(()
=>
{
console
.
log
(
'
onBeforeMount
'
);
init
();
});
onMounted
(()
=>
{
onMounted
(()
=>
{
if
(
slots
.
default
)
{
console
.
log
(
'
onMounted
'
);
state
.
steps
=
slots
.
default
();
// init();
console
.
log
(
'
slots1
'
,
state
.
steps
.
length
);
console
.
log
(
'
slots2
'
,
state
.
steps
[
0
].
children
);
states
();
}
});
});
function
states
()
{
// watch(
// () => props.current,
// val => {
// console.log()
// states();
// }
// );
// watch(
// () => props.source,
// val => {
// init();
// }
// )
const
init
=
()
=>
{
state
.
steps
=
(
slots
as
any
)?.
default
();
stepStates
();
};
const
stepStates
=
()
=>
{
if
(
props
.
progressDot
)
{
console
.
log
(
'
state.steps
'
,
state
.
steps
);
state
.
steps
.
dot
=
true
;
}
const
total
=
state
.
steps
.
length
;
const
total
=
state
.
steps
.
length
;
state
.
steps
.
forEach
((
child
,
index
)
=>
{
state
.
steps
.
forEach
((
child
,
index
)
=>
{
child
.
stepNumber
=
index
+
1
;
child
.
stepNumber
=
index
+
1
;
state
.
children
=
index
;
// console.log('data', state.children)
if
(
props
.
direction
===
'
horizontal
'
)
{
if
(
props
.
direction
===
'
horizontal
'
)
{
child
.
total
=
total
;
child
.
total
=
total
;
}
}
console
.
log
(
'
11
'
,
child
);
// console.log('父
', child);
if
(
!
child
.
currentStatus
)
{
if
(
!
child
.
currentStatus
)
{
if
(
index
==
props
.
current
-
1
)
{
if
(
index
==
props
.
current
-
1
)
{
if
(
props
.
status
!=
'
error
'
)
{
if
(
props
.
status
!=
'
error
'
)
{
...
@@ -69,13 +107,20 @@ export default create({
...
@@ -69,13 +107,20 @@ export default create({
}
}
}
}
if
(
index
+
1
===
total
)
{
if
(
index
+
1
===
total
)
{
child
.
currentStatus
+=
'
nut-step-last
'
;
child
.
currentStatus
+=
'
nut-step-last
'
;
}
}
});
});
}
};
// provide('parent', {
// slots
// });
provide
(
'
stepsParent
'
,
{
props
,
state
});
return
{
return
{
classes
,
classes
,
states
st
epSt
ates
};
};
}
}
});
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录