chenhaodong / mew-iview

Blame view

test/routers/button.vue 7.94 KB
Edit Raw Normal View History
7fa943eb   梁灏   init 
1
 
  <template>
f1b3ed30   梁灏   Button add circle... 
2
3
 
      <h4>基本</h4>
      <br><br>
b88f42eb   梁灏   Button add 4 new ... 
4
5
6
7
 
      <i-button type="success">按钮</i-button>
      <i-button type="warning">按钮</i-button>
      <i-button type="error">按钮</i-button>
      <i-button type="info">按钮</i-button>
71d9fc8e   梁灏   Button add new pr... 
8
9
10
11
12
 
      <i-button icon="ios-search" type="success"></i-button>
      <br><br>
      <div style="width:400px;height:200px;">
          <i-button type="error" long size="small">按钮</i-button>
      </div>
b88f42eb   梁灏   Button add 4 new ... 
13
 
      <br><br>
f1b3ed30   梁灏   Button add circle... 
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
 
      <Button-group>
          <i-button>取消</i-button>
          <i-button type="primary">确定</i-button>
      </Button-group>
      <Button-group>
          <i-button disabled>昨日</i-button>
          <i-button disabled>今日</i-button>
          <i-button disabled>明日</i-button>
      </Button-group>
      <Button-group>
          <i-button type="primary">L</i-button>
          <i-button>M</i-button>
          <i-button type="ghost">M</i-button>
          <i-button type="dashed">R</i-button>
      </Button-group>
      <br><br>
      <h4>配合图标</h4>
      <br><br>
      <Button-group>
          <i-button type="primary">
              <Icon type="chevron-left"></Icon>
              前进
          </i-button>
          <i-button type="primary">
              后退
              <Icon type="chevron-right"></Icon>
          </i-button>
      </Button-group>
      <Button-group>
          <i-button type="primary" icon="ios-skipbackward"></i-button>
          <i-button type="primary" icon="ios-skipforward"></i-button>
      </Button-group>
      <Button-group>
          <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
          <i-button type="ghost" icon="ios-sunny-outline"></i-button>
          <i-button type="ghost" icon="ios-crop"></i-button>
          <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
      </Button-group>
      <br><br>
      <h4>圆角</h4>
      <br><br>
      <Button-group shape="circle">
          <i-button type="primary">
              <Icon type="chevron-left"></Icon>
              前进
          </i-button>
          <i-button type="primary">
              后退
              <Icon type="chevron-right"></Icon>
          </i-button>
      </Button-group>
      <Button-group shape="circle">
          <i-button type="primary" icon="ios-skipbackward"></i-button>
          <i-button type="primary" icon="ios-skipforward"></i-button>
      </Button-group>
      <Button-group shape="circle">
          <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
          <i-button type="ghost" icon="ios-sunny-outline"></i-button>
          <i-button type="ghost" icon="ios-crop"></i-button>
          <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
      </Button-group>
      <Button-group shape="circle" size="large">
          <i-button type="primary" icon="ios-skipbackward"></i-button>
          <i-button type="primary" icon="ios-skipforward"></i-button>
      </Button-group>
      <Button-group shape="circle" size="large">
          <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
          <i-button type="ghost" icon="ios-sunny-outline"></i-button>
          <i-button type="ghost" icon="ios-crop"></i-button>
          <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
      </Button-group>
      <Button-group shape="circle" size="small">
          <i-button type="primary" icon="ios-skipbackward"></i-button>
          <i-button type="primary" icon="ios-skipforward"></i-button>
      </Button-group>
      <Button-group shape="circle" size="small">
          <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
          <i-button type="ghost" icon="ios-sunny-outline"></i-button>
          <i-button type="ghost" icon="ios-crop"></i-button>
          <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
      </Button-group>
      <br><br>
698e3b61   梁灏   iButton add some ... 
96
97
98
99
100
101
102
 
      <i-button type="primary" icon="ios-search" shape="circle" size="small"></i-button>
      <i-button type="primary" icon="ios-search" shape="circle"></i-button>
      <i-button type="primary" icon="ios-search" shape="circle" size="large"></i-button>
      <i-button type="primary" icon="ios-search" shape="circle" size="small">搜索</i-button>
      <i-button type="primary" icon="ios-search" shape="circle">搜索</i-button>
      <i-button type="primary" icon="ios-search" shape="circle" size="large">搜索</i-button>
      <br><br>
d6342fe1   jingsam   fixed ie bug 
103
104
105
 
      <i-button>Default</i-button>
      <i-button type="primary">Primary</i-button>
      <i-button type="ghost">Ghost</i-button>
698e3b61   梁灏   iButton add some ... 
106
107
108
 
      <i-button type="dashed">Dashed</i-button>
      <i-button type="text">文字按钮</i-button>
      <i-button type="text" disabled>文字按钮</i-button>
e1596b7e   梁灏   add Button UI 
109
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
110
111
112
 
      <i-button type="primary" size="large">Large</i-button>
      <i-button type="primary">Default</i-button>
      <i-button type="primary" size="small">Small</i-button>
e1596b7e   梁灏   add Button UI 
113
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
114
115
 
      <i-button>Default</i-button>
      <i-button disabled>Default(Disabled)</i-button>
e1596b7e   梁灏   add Button UI 
116
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
117
118
 
      <i-button type="primary">Primary</i-button>
      <i-button type="primary" disabled>Primary(Disabled)</i-button>
e1596b7e   梁灏   add Button UI 
119
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
120
121
 
      <i-button type="ghost">Ghost</i-button>
      <i-button type="ghost" disabled>Ghost(Disabled)</i-button>
e1596b7e   梁灏   add Button UI 
122
 
      <br><br>
698e3b61   梁灏   iButton add some ... 
123
124
125
 
      <i-button type="dashed">dashed</i-button>
      <i-button type="dashed" disabled>dashed(Disabled)</i-button>
      <br><br>
d6342fe1   jingsam   fixed ie bug 
126
127
 
      <i-button type="primary" shape="circle" icon="ios-search"></i-button>
      <i-button type="primary" icon="ios-search">搜索</i-button>
e1596b7e   梁灏   add Button UI 
128
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
129
 
      <i-button type="ghost" shape="circle">
e1596b7e   梁灏   add Button UI 
130
 
          <Icon type="search"></Icon>
d6342fe1   jingsam   fixed ie bug 
131
132
 
      </i-button>
      <i-button type="ghost">
e1596b7e   梁灏   add Button UI 
133
134
 
          <Icon type="search"></Icon>
          搜索
d6342fe1   jingsam   fixed ie bug 
135
136
 
      </i-button>
      <i-button type="ghost" shape="circle" size="large">
e1596b7e   梁灏   add Button UI 
137
 
          <Icon type="search"></Icon>
d6342fe1   jingsam   fixed ie bug 
138
139
 
      </i-button>
      <i-button type="ghost" shape="circle" size="small">
e1596b7e   梁灏   add Button UI 
140
 
          <Icon type="search"></Icon>
d6342fe1   jingsam   fixed ie bug 
141
 
      </i-button>
e1596b7e   梁灏   add Button UI 
142
 
      <br><br><br>
d6342fe1   jingsam   fixed ie bug 
143
144
145
146
 
      <i-button type="primary" loading>Loading...</i-button>
      <i-button type="primary" loading size="large">Loading...</i-button>
      <i-button type="primary" loading size="small">Loading...</i-button>
      <i-button type="primary" :loading="loading" @click="toLoading">
e1596b7e   梁灏   add Button UI 
147
148
 
          <span v-if="!loading">Click me!</span>
          <span v-else>Loading...</span>
d6342fe1   jingsam   fixed ie bug 
149
150
 
      </i-button>
      <i-button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
e1596b7e   梁灏   add Button UI 
151
152
 
          <span v-if="!loading2">Click me!</span>
          <span v-else>Loading...</span>
d6342fe1   jingsam   fixed ie bug 
153
 
      </i-button>
e1596b7e   梁灏   add Button UI 
154
155
 
      <h4>基本</h4>
      <Button-group size="large">
d6342fe1   jingsam   fixed ie bug 
156
157
 
          <i-button>取消</i-button>
          <i-button type="primary">确定</i-button>
e1596b7e   梁灏   add Button UI 
158
 
      </Button-group>
7fa943eb   梁灏   init 
159
 
      <Button-group>
d6342fe1   jingsam   fixed ie bug 
160
161
162
 
          <i-button type="primary">L</i-button>
          <i-button>M</i-button>
          <i-button type="ghost">R</i-button>
698e3b61   梁灏   iButton add some ... 
163
 
          <i-button type="dashed">R</i-button>
e1596b7e   梁灏   add Button UI 
164
165
166
 
      </Button-group>
      <h4>配合图标</h4>
      <Button-group>
d6342fe1   jingsam   fixed ie bug 
167
 
          <i-button type="primary">
e1596b7e   梁灏   add Button UI 
168
169
 
              <Icon type="chevron-left"></Icon>
              前进
d6342fe1   jingsam   fixed ie bug 
170
171
 
          </i-button>
          <i-button type="primary">
e1596b7e   梁灏   add Button UI 
172
173
 
              后退
              <Icon type="chevron-right"></Icon>
d6342fe1   jingsam   fixed ie bug 
174
 
          </i-button>
e1596b7e   梁灏   add Button UI 
175
176
 
      </Button-group>
      <Button-group>
d6342fe1   jingsam   fixed ie bug 
177
178
 
          <i-button type="primary" icon="cloud"></i-button>
          <i-button type="primary" icon="upload"></i-button>
7fa943eb   梁灏   init 
179
 
      </Button-group>
7fa943eb   梁灏   init 
180
181
 
  </template>
  <script>
e1134de2   jingsam   not bundle vue in... 
182
183
 
      import { iButton, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page } from 'iview';
      const ButtonGroup = iButton.Group;
7fa943eb   梁灏   init 
184
185
186
187
188
 
      const RadioGroup = Radio.Group;
      const CheckboxGroup = Checkbox.Group;
  
      export default {
          components: {
e1134de2   jingsam   not bundle vue in... 
189
 
              iButton,
7fa943eb   梁灏   init 
190
191
192
193
194
195
196
197
198
199
200
 
              ButtonGroup,
              Icon,
              iInput: Input,
              Switch,
              Radio,
              RadioGroup,
              Checkbox,
              CheckboxGroup,
              InputNumber,
              Row,
              iCol: Col,
698e3b61   梁灏   iButton add some ... 
201
 
              Page
7fa943eb   梁灏   init 
202
203
 
          },
          props: {
d6342fe1   jingsam   fixed ie bug 
204
7fa943eb   梁灏   init 
205
206
207
 
          },
          data () {
              return {
e1596b7e   梁灏   add Button UI 
208
 
                  loading: false,
72493927   梁灏   fixed bug: Can no... 
209
210
 
                  loading2: false,
                  model6: ''
d6342fe1   jingsam   fixed ie bug 
211
 
              }
7fa943eb   梁灏   init 
212
 
          },
7fa943eb   梁灏   init 
213
 
          methods: {
e1596b7e   梁灏   add Button UI 
214
215
 
              toLoading () {
                  this.loading = true;
7fa943eb   梁灏   init 
216
 
              },
e1596b7e   梁灏   add Button UI 
217
218
 
              toLoading2 () {
                  this.loading2 = true;
7fa943eb   梁灏   init 
219
220
221
222
 
              }
          }
      }
  </script>