chenhaodong / mew-iview

Blame view

test/routers/page.vue 3.6 KB
Edit Raw Normal View History
7fa943eb   梁灏   init 
1
 
  <style>
7570318b   梁灏   fixed Tooltip pla... 
2
7fa943eb   梁灏   init 
3
4
 
  </style>
  <template>
45b672ca   梁灏   add Steps UI 
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
 
      <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>
      <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>
d6342fe1   jingsam   fixed ie bug 
44
 
      <i-button type="primary" @click="next">下一步</i-button>
45b672ca   梁灏   add Steps UI 
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
      <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>
7fa943eb   梁灏   init 
59
60
 
  </template>
  <script>
45b672ca   梁灏   add Steps UI 
61
62
63
 
      import { Page, Steps, Button } from 'iview';
  
      const Step = Steps.Step;
7fa943eb   梁灏   init 
64
65
66
 
  
      export default {
          components: {
45b672ca   梁灏   add Steps UI 
67
68
69
 
              Page,
              Steps,
              Step,
d6342fe1   jingsam   fixed ie bug 
70
 
              iButton: Button
7fa943eb   梁灏   init 
71
72
 
          },
          props: {
d6342fe1   jingsam   fixed ie bug 
73
7fa943eb   梁灏   init 
74
75
76
 
          },
          data () {
              return {
45b672ca   梁灏   add Steps UI 
77
78
 
                  total: 512,
                  current: 0
7fa943eb   梁灏   init 
79
80
81
 
              }
          },
          computed: {
d6342fe1   jingsam   fixed ie bug 
82
7fa943eb   梁灏   init 
83
84
85
86
 
          },
          methods: {
              setPage (page) {
                  console.log(page)
45b672ca   梁灏   add Steps UI 
87
88
89
90
91
92
93
 
              },
              next () {
                  if (this.current == 3) {
                      this.current = 0;
                  } else {
                      this.current += 1;
                  }
7fa943eb   梁灏   init 
94
95
96
 
              }
          }
      }
d6342fe1   jingsam   fixed ie bug 
97
 
  </script>