# ProcessLine/ProcessLineGroup
纵向步骤条
# 引入说明
请切记该组件不要分开使用。
TIP
import ProcessLine from "jimoui/components/ProcessLine/V1/ProcessLine";
import ProcessLineGroup from "jimoui/components/ProcessLineGroup/V1/ProcessLineGroup";
1
2
2
# 代码演示
TIP
//设计规范第一种
<ProcessLineGroup>
<ProcessLine :process="process1" :pointType="'target'"></ProcessLine>
<ProcessLine :process="process2" :pointType="'light'"></ProcessLine>
<ProcessLine :process="process3" :pointType="'light'"></ProcessLine>
</ProcessLineGroup>
//设计规范第二种
<ProcessLineGroup>
<ProcessLine :process="process1"></ProcessLine>
<ProcessLine :process="process2"></ProcessLine>
<ProcessLine :process="process3"></ProcessLine>
</ProcessLineGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
export default kayakVue({
name: "ProcessLine",
el: "demo-processLine",
data() {
return {
process1: {
title: "操作成功",
content: "内容详情,根据实际文案展示",
tips: "11-23 13:41",
},
process2: {
title: "标题",
content: "内容详情,根据实际文案展示,可展示多行,根据实际文案展示,可展示多行",
tips: "11-23 13:41",
},
process3: {
title: "标题标题标题标题标题标题标题可折行展示",
content: "内容详情,根据实际文案展示",
tips: "11-23 13:41",
},
};
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 属性
ProcessLine:
配置 | 用途 | 取值 | 使用描述 |
---|---|---|---|
:process | 当前列表项的内容配置 | ProcessConfig | ProcessConfig:{ title:"标题文案", content:"描述文案" tips:"标题栏右侧提示语,通常为时间、日期等" } |
:pointType | 点点配色类型。右侧文案会根据不同配置展示不同样式 | String | 默认为deep。支持target勾选点/deep深色点/light浅色点。 |
:processColor | 改变步骤条颜色 | String | 默认为#ff680a |