chenhaodong / mew-iview

Blame view

test/routers/button.vue 10.5 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
 
      <i-button icon="ios-search" type="success"></i-button>
      <br><br>
66993732   梁灏   update Modal、Poptip 
10
 
      <div style="width:400px">
71d9fc8e   梁灏   Button add new pr... 
11
12
 
          <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
 
      <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>
fd6512a9   Rijn   implemented verti... 
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
  
      <br><br>
      <h4>Vertical</h4>
      <br><br>
  
      <Button-group vertical>
          <i-button>取消</i-button>
          <i-button type="primary">确定</i-button>
      </Button-group>
      <Button-group vertical>
          <i-button>取消</i-button>
          <i-button type="primary">确定</i-button>
      </Button-group>
      <Button-group vertical>
          <i-button disabled>昨日</i-button>
          <i-button disabled>今日</i-button>
          <i-button disabled>明日</i-button>
      </Button-group>
      <Button-group vertical>
          <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>
      <Button-group vertical>
          <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 vertical>
          <i-button type="primary" icon="ios-skipbackward"></i-button>
          <i-button type="primary" icon="ios-skipforward"></i-button>
      </Button-group>
      <Button-group vertical>
          <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 vertical 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" vertical 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" vertical 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" vertical 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>
f1b3ed30   梁灏   Button add circle... 
160
 
      <br><br>
698e3b61   梁灏   iButton add some ... 
161
162
163
164
165
166
167
 
      <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 
168
169
170
 
      <i-button>Default</i-button>
      <i-button type="primary">Primary</i-button>
      <i-button type="ghost">Ghost</i-button>
698e3b61   梁灏   iButton add some ... 
171
172
173
 
      <i-button type="dashed">Dashed</i-button>
      <i-button type="text">文字按钮</i-button>
      <i-button type="text" disabled>文字按钮</i-button>
e1596b7e   梁灏   add Button UI 
174
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
175
176
177
 
      <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 
178
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
179
180
 
      <i-button>Default</i-button>
      <i-button disabled>Default(Disabled)</i-button>
e1596b7e   梁灏   add Button UI 
181
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
182
183
 
      <i-button type="primary">Primary</i-button>
      <i-button type="primary" disabled>Primary(Disabled)</i-button>
e1596b7e   梁灏   add Button UI 
184
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
185
186
 
      <i-button type="ghost">Ghost</i-button>
      <i-button type="ghost" disabled>Ghost(Disabled)</i-button>
e1596b7e   梁灏   add Button UI 
187
 
      <br><br>
698e3b61   梁灏   iButton add some ... 
188
189
190
 
      <i-button type="dashed">dashed</i-button>
      <i-button type="dashed" disabled>dashed(Disabled)</i-button>
      <br><br>
d6342fe1   jingsam   fixed ie bug 
191
192
 
      <i-button type="primary" shape="circle" icon="ios-search"></i-button>
      <i-button type="primary" icon="ios-search">搜索</i-button>
e1596b7e   梁灏   add Button UI 
193
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
194
 
      <i-button type="ghost" shape="circle">
e1596b7e   梁灏   add Button UI 
195
 
          <Icon type="search"></Icon>
d6342fe1   jingsam   fixed ie bug 
196
197
 
      </i-button>
      <i-button type="ghost">
e1596b7e   梁灏   add Button UI 
198
199
 
          <Icon type="search"></Icon>
          搜索
d6342fe1   jingsam   fixed ie bug 
200
201
 
      </i-button>
      <i-button type="ghost" shape="circle" size="large">
e1596b7e   梁灏   add Button UI 
202
 
          <Icon type="search"></Icon>
d6342fe1   jingsam   fixed ie bug 
203
204
 
      </i-button>
      <i-button type="ghost" shape="circle" size="small">
e1596b7e   梁灏   add Button UI 
205
 
          <Icon type="search"></Icon>
d6342fe1   jingsam   fixed ie bug 
206
 
      </i-button>
e1596b7e   梁灏   add Button UI 
207
 
      <br><br><br>
d6342fe1   jingsam   fixed ie bug 
208
209
210
211
 
      <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 
212
213
 
          <span v-if="!loading">Click me!</span>
          <span v-else>Loading...</span>
d6342fe1   jingsam   fixed ie bug 
214
215
 
      </i-button>
      <i-button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
e1596b7e   梁灏   add Button UI 
216
217
 
          <span v-if="!loading2">Click me!</span>
          <span v-else>Loading...</span>
d6342fe1   jingsam   fixed ie bug 
218
 
      </i-button>
e1596b7e   梁灏   add Button UI 
219
220
 
      <h4>基本</h4>
      <Button-group size="large">
d6342fe1   jingsam   fixed ie bug 
221
222
 
          <i-button>取消</i-button>
          <i-button type="primary">确定</i-button>
e1596b7e   梁灏   add Button UI 
223
 
      </Button-group>
7fa943eb   梁灏   init 
224
 
      <Button-group>
d6342fe1   jingsam   fixed ie bug 
225
226
227
 
          <i-button type="primary">L</i-button>
          <i-button>M</i-button>
          <i-button type="ghost">R</i-button>
698e3b61   梁灏   iButton add some ... 
228
 
          <i-button type="dashed">R</i-button>
e1596b7e   梁灏   add Button UI 
229
230
231
 
      </Button-group>
      <h4>配合图标</h4>
      <Button-group>
d6342fe1   jingsam   fixed ie bug 
232
 
          <i-button type="primary">
e1596b7e   梁灏   add Button UI 
233
234
 
              <Icon type="chevron-left"></Icon>
              前进
d6342fe1   jingsam   fixed ie bug 
235
236
 
          </i-button>
          <i-button type="primary">
e1596b7e   梁灏   add Button UI 
237
238
 
              后退
              <Icon type="chevron-right"></Icon>
d6342fe1   jingsam   fixed ie bug 
239
 
          </i-button>
e1596b7e   梁灏   add Button UI 
240
241
 
      </Button-group>
      <Button-group>
d6342fe1   jingsam   fixed ie bug 
242
243
 
          <i-button type="primary" icon="cloud"></i-button>
          <i-button type="primary" icon="upload"></i-button>
7fa943eb   梁灏   init 
244
 
      </Button-group>
7fa943eb   梁灏   init 
245
246
 
  </template>
  <script>
e1134de2   jingsam   not bundle vue in... 
247
248
 
      import { iButton, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page } from 'iview';
      const ButtonGroup = iButton.Group;
7fa943eb   梁灏   init 
249
250
251
252
253
 
      const RadioGroup = Radio.Group;
      const CheckboxGroup = Checkbox.Group;
  
      export default {
          components: {
e1134de2   jingsam   not bundle vue in... 
254
 
              iButton,
7fa943eb   梁灏   init 
255
256
257
258
259
260
261
262
263
264
265
 
              ButtonGroup,
              Icon,
              iInput: Input,
              Switch,
              Radio,
              RadioGroup,
              Checkbox,
              CheckboxGroup,
              InputNumber,
              Row,
              iCol: Col,
698e3b61   梁灏   iButton add some ... 
266
 
              Page
7fa943eb   梁灏   init 
267
268
 
          },
          props: {
d6342fe1   jingsam   fixed ie bug 
269
7fa943eb   梁灏   init 
270
271
272
 
          },
          data () {
              return {
e1596b7e   梁灏   add Button UI 
273
 
                  loading: false,
72493927   梁灏   fixed bug: Can no... 
274
275
 
                  loading2: false,
                  model6: ''
d6342fe1   jingsam   fixed ie bug 
276
 
              }
7fa943eb   梁灏   init 
277
 
          },
7fa943eb   梁灏   init 
278
 
          methods: {
e1596b7e   梁灏   add Button UI 
279
280
 
              toLoading () {
                  this.loading = true;
7fa943eb   梁灏   init 
281
 
              },
e1596b7e   梁灏   add Button UI 
282
283
 
              toLoading2 () {
                  this.loading2 = true;
7fa943eb   梁灏   init 
284
285
286
287
 
              }
          }
      }
  </script>