chenhaodong / mew-iview

Blame view

examples/routers/steps.vue 3.85 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
48
49
 
      <br>
      <Button type="primary" @click.native="next">下一步</Button>
      <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>
bd596e7a   huixisheng   support Steps 
66
 
      import { Steps, Button } from 'iview';
b8273bfc   jingsam   add a nav for tes... 
67
68
69
70
71
 
  
      const Step = Steps.Step;
  
      export default {
          components: {
b8273bfc   jingsam   add a nav for tes... 
72
73
 
              Steps,
              Step,
bd596e7a   huixisheng   support Steps 
74
 
              Button
b8273bfc   jingsam   add a nav for tes... 
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
          },
          props: {
  
          },
          data () {
              return {
                  total: 512,
                  current: 0
              }
          },
          computed: {
  
          },
          methods: {
b8273bfc   jingsam   add a nav for tes... 
89
90
91
92
93
94
95
96
97
98
 
              next () {
                  if (this.current == 3) {
                      this.current = 0;
                  } else {
                      this.current += 1;
                  }
              }
          }
      }
  </script>