# 步骤条（Progress bar）
多用于插件页日志图标中详细日志展示
# dof-simple-flow 组件
steps流程组件
- 可设置主题色，如高亮，字体颜色等
# 示例
<template>
<div class="dof-demo">
<dof-minibar title="4.7步骤条"></dof-minibar>
<scroller class="scroller">
<dof-catalog title="含标题、时间的流程图" background-color="#E5E5E8"></dof-catalog>
<div class="simple-wrapper">
<text class="simple-flow-title-date">2021年3月06日 周日</text>
<dof-simple-flow :list="testData1" :leftContent="true" :leftContentStyle="leftContentStyle"></dof-simple-flow>
</div>
</scroller>
</div>
</template>
<style scoped>
.dof-demo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #151617;
}
.scroller {
flex: 1;
}
.simple-wrapper {
margin-left: 32px;
margin-right: 32px;
margin-top: 32px;
padding-left: 32px;
padding-right: 32px;
background-color: rgba(177, 193, 234, 0.05);
}
.simple-flow-title-date {
font-family: PingFangSC-Medium;
font-size: 28px;
color: rgba(255, 255, 255, 0.4);
font-weight: 500;
margin-top: 54px;
margin-bottom: 32px;
}
.title {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
font-size: 26px;
color: #333333;
background-color: #eeeeee;
font-weight: bold;
}
.btnWrap {
flex-direction: row;
justify-content: center;
margin-top: 120px;
margin-bottom: 120px;
}
.horizontalFlow {
background-color: #f9f9f9;
}
</style>
<script>
import { DofSimpleFlow, DofMinibar, DofCatalog } from 'dolphin-weex-ui'
import { setTitle } from 'src/_mods/set-nav'
export default {
components: { DofSimpleFlow, DofMinibar, DofCatalog },
beforeCreate() {
this.$theme.setTheme('colmo')
// this.$bridge.setStatusBar({ colorMode: '2' })
},
data: () => ({
leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
folding: false,
flowConfig: {
lineColor: '#00CBB8',
pointInnerColor: '#00CBB8',
highlightTitleColor: '#00CBB8',
highlightPointInnerColor: 'red'
},
leftContentStyle: {
width: '100px',
marginRight: '-18px'
},
flowConfig1: {
lineColor: '#E5E5E8',
pointInnerColor: '#C7C7CC',
highlightTitleColor: '#8A8A8F',
highlightPointInnerColor: '#C7C7CC',
titleSize: '24px'
},
testData1: [
{
leftContentDate: '21:10:29',
highlight: true,
title: '筒灯 开启'
},
{
leftContentDate: '19:54:28',
title: '吸顶灯 开启'
// highlight: true,
},
{
leftContentDate: '19:50:21',
title: '已打开，环境光暗'
},
{
leftContentDate: '19:49:03',
title: '已打开，环境光暗'
},
{
leftContentDate: '19:50:21',
title: '筒灯 开启'
},
{
leftContentDate: '19:50:21',
title: '筒灯 开启'
},
{
leftContentDate: '19:50:21',
title: '吸顶灯 开启'
}
]
}),
created() {
setTitle('SimpleFlow')
},
computed: {
_leftContentStyle() {
let tmp = this.$theme.watchTheme({
colmo: { width: '100px' }, // colmo模式 的 style
default: { width: '100px' }
})
return tmp
}
},
methods: {
minibarRightButtonClick() {
const home = 'index.js'
this.$MID.platform.name.toLowerCase() !== 'web' && this.$MID.route.push(home)
}
}
}
</script>
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
点我扫二维码 查看demo
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| list | Array | Y | - | simple-flow组件内容， 见注1 |
| flow-config | Object | N | {} | 主题色，参照data中flowConfig对象,见注2 |
| leftContent | Boolean | N | false | 步骤条左边是否自定义内容 |
| leftContentStyle | Object | N | {} | 步骤条左边自定义内容样式对象 |
# Slots
| 名称 | 说明 |
|---|---|
| leftContent | 步骤条左边自定义内容 |
注1: list
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| title | String | Y | - | 标题 |
| desc | String | N | - | 描述 |
| date | String | N | - | 日期 |
| highlight | Boolean | N | false | 是否高亮当前项 |
| leftContentDate | String | N | '' | 步骤条左边默认slot的内容-日期 |
注2: flow-config
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| lineColor | String | N | #267AFF | 时间轴颜色 |
| titleSize | String | N | 28px | 标题字体大小 |
| highlightTitleColor | String | N | #267AFF | 高亮标题颜色 |
| pointInnerColor | String | N | #267AFF | 时间节点Point颜色 |
| highlightPointInnerColor | String | N | #267AFF | 高亮时间节点Point颜色 |
# Attention
可动态修改 dof-simple-flow list属性的绑定对象,以改变其流程和状态