steps.vue
6.4 KB
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
<template>
<div>
<Steps :current="index">
<!--<Step title="开始"></Step>-->
<Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index" :content="item.startTime"></Step>
<!--<Step title="结束"></Step>-->
</Steps>
<Button @click="change">change</Button>
<br><br><br><br>
<hr>
<!--<Steps :current="1" size="small">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<Steps :current="2">-->
<!--<Step title="已完成"></Step>-->
<!--<Step title="进行中"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<Steps :current="1" size="small">-->
<!--<Step title="已完成"></Step>-->
<!--<Step title="进行中"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--<Step title="待进行"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<Steps :current="1" direction="vertical" size="small">-->
<!--<Step title="注册" icon="person-add"></Step>-->
<!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="验证邮箱" icon="email"></Step>-->
<!--</Steps>-->
<!--<Steps :current="1" direction="vertical">-->
<!--<Step title="注册" icon="person-add"></Step>-->
<!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="验证邮箱" icon="email"></Step>-->
<!--</Steps>-->
<!--<Steps :current="-1" direction="vertical">-->
<!--<Step title="注册" icon="person-add"></Step>-->
<!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="验证邮箱" status="finish" icon="email"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<p>当前正在进行第 {{ current + 1 }} 步</p>-->
<!--<Steps :current="current">-->
<!--<Step title="步骤1"></Step>-->
<!--<Step title="步骤2"></Step>-->
<!--<Step title="步骤3"></Step>-->
<!--<Step title="步骤4"></Step>-->
<!--</Steps>-->
<!--<br>-->
<!--<i-button type="primary" @click.native="next">下一步</i-button>-->
<!--<br><br><br>-->
<!--<Steps :current="1" direction="vertical" size="small">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--</Steps>-->
<!--<br><br>-->
<!--<Steps :current="1" status="error">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
<!--</Steps>-->
<!--<Steps direction="vertical" :current="3">-->
<!--<Step title="已完成" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 16px; color: green">这里是该步骤的描述信息1</div>-->
<!--</Step>-->
<!--<Step title="进行中" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 24px; color: red">这里是该步骤的描述信息2</div>-->
<!--</Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 46px; color: blue">这里是该步骤的描述信息3</div>-->
<!--</Step>-->
<!--<Step title="待进行" content="这里是该步骤的描述信息">-->
<!--<div style="font-size: 24px; color: green">这里是该步骤的描述信息4</div>-->
<!--</Step>-->
<!--</Steps>-->
</div>
</template>
<script>
export default {
props: {
},
data () {
return {
total: 512,
current: 0,
index:0,
activitiList:[
{
approveUserName:'123',
startTime:'1'
},{
approveUserName:'123',
startTime:'2'
}
],
changeList:[
{
approveUserName:'456',
startTime:'1'
},{
approveUserName:'456',
startTime:'2'
},{
approveUserName:'456',
startTime:'3'
},{
approveUserName:'456',
startTime:'4'
},{
approveUserName:'456',
startTime:'5'
}
]
}
},
computed: {
},
methods: {
next () {
if (this.current == 3) {
this.current = 0;
} else {
this.current += 1;
}
},
change () {
this.activitiList = this.activitiList.concat(this.changeList);
}
},
mounted () {
// this.change();
}
}
</script>