b8273bfc
 jingsam
add a nav for tes...
|
1
|
<template>
|
|
bd596e7a
huixisheng
support Steps
|
2
|
<div>
|
|
b8273bfc
jingsam
add a nav for tes...
|
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
|
<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>
|
|
b450b555
huixisheng
update Steps
|
34
35
36
37
38
|
<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>
|
|
b8273bfc
jingsam
add a nav for tes...
|
39
40
41
42
43
44
45
46
|
<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>
|
|
bd596e7a
huixisheng
support Steps
|
47
|
<br>
|
|
8ac8d1ed
梁灏
修复警告
|
48
|
<i-button type="primary" @click.native="next">下一步</i-button>
|
|
bd596e7a
huixisheng
support Steps
|
49
|
<br><br><br>
|
|
b8273bfc
jingsam
add a nav for tes...
|
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<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>
|
|
79c58804
Yang
给Steps组件增加slot支持
|
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<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>
|
|
bd596e7a
huixisheng
support Steps
|
77
|
</div>
|
|
b8273bfc
jingsam
add a nav for tes...
|
78
79
|
</template>
<script>
|
|
b8273bfc
jingsam
add a nav for tes...
|
80
|
export default {
|
|
b8273bfc
jingsam
add a nav for tes...
|
81
82
83
84
85
86
87
88
89
90
91
92
93
|
props: {
},
data () {
return {
total: 512,
current: 0
}
},
computed: {
},
methods: {
|
|
b8273bfc
jingsam
add a nav for tes...
|
94
95
96
97
98
99
100
101
102
103
|
next () {
if (this.current == 3) {
this.current = 0;
} else {
this.current += 1;
}
}
}
}
</script>
|
