chenhaodong / mew-iview

Blame view

examples/routers/steps.vue 3.69 KB
Edit Raw Normal View History
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>
bd596e7a   huixisheng   support Steps 
63
 
  </div>
b8273bfc   jingsam   add a nav for tes... 
64
65
 
  </template>
  <script>
b8273bfc   jingsam   add a nav for tes... 
66
 
      export default {
b8273bfc   jingsam   add a nav for tes... 
67
68
69
70
71
72
73
74
75
76
77
78
79
 
          props: {
  
          },
          data () {
              return {
                  total: 512,
                  current: 0
              }
          },
          computed: {
  
          },
          methods: {
b8273bfc   jingsam   add a nav for tes... 
80
81
82
83
84
85
86
87
88
89
 
              next () {
                  if (this.current == 3) {
                      this.current = 0;
                  } else {
                      this.current += 1;
                  }
              }
          }
      }
  </script>