other / mew-iview

Blame view

test/routers/button.vue 11.4 KB
Edit Raw Normal View History
7fa943eb   梁灏   init 
1
 
  <template>
f1b3ed30   梁灏   Button add circle... 
2
3
 
      <h4>基本</h4>
      <br><br>
8a83e7c4   梁灏   update Form 
4
5
6
7
8
9
10
11
12
13
14
15
16
 
      <div style="background: #f60">
          <input-number></input-number>
          <Date-picker type="date" placeholder="选择日期" style="width: 100px;display: inline-block"></Date-picker>
          <i-input style="width: 100px"></i-input>
          <i-input type="text" placeholder="Username" style="width: 100px">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
          </i-input>
          <i-button type="primary">按钮</i-button>
          <i-select :model.sync="model1" style="width:200px">
              <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
          </i-select>
      </div>
      <br><br>
b88f42eb   梁灏   Button add 4 new ... 
17
18
19
20
 
      <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... 
21
22
 
      <i-button icon="ios-search" type="success"></i-button>
      <br><br>
66993732   梁灏   update Modal、Poptip 
23
 
      <div style="width:400px">
71d9fc8e   梁灏   Button add new pr... 
24
25
 
          <i-button type="error" long size="small">按钮</i-button>
      </div>
b88f42eb   梁灏   Button add 4 new ... 
26
 
      <br><br>
f1b3ed30   梁灏   Button add circle... 
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
96
97
98
99
100
101
102
103
104
105
106
107
 
      <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... 
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
160
161
162
163
164
165
166
167
168
169
170
171
172
 
  
      <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... 
173
 
      <br><br>
698e3b61   梁灏   iButton add some ... 
174
175
176
177
178
179
180
 
      <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 
181
182
183
 
      <i-button>Default</i-button>
      <i-button type="primary">Primary</i-button>
      <i-button type="ghost">Ghost</i-button>
698e3b61   梁灏   iButton add some ... 
184
185
186
 
      <i-button type="dashed">Dashed</i-button>
      <i-button type="text">文字按钮</i-button>
      <i-button type="text" disabled>文字按钮</i-button>
e1596b7e   梁灏   add Button UI 
187
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
188
189
190
 
      <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 
191
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
192
193
 
      <i-button>Default</i-button>
      <i-button disabled>Default(Disabled)</i-button>
e1596b7e   梁灏   add Button UI 
194
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
195
196
 
      <i-button type="primary">Primary</i-button>
      <i-button type="primary" disabled>Primary(Disabled)</i-button>
e1596b7e   梁灏   add Button UI 
197
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
198
199
 
      <i-button type="ghost">Ghost</i-button>
      <i-button type="ghost" disabled>Ghost(Disabled)</i-button>
e1596b7e   梁灏   add Button UI 
200
 
      <br><br>
698e3b61   梁灏   iButton add some ... 
201
202
203
 
      <i-button type="dashed">dashed</i-button>
      <i-button type="dashed" disabled>dashed(Disabled)</i-button>
      <br><br>
d6342fe1   jingsam   fixed ie bug 
204
205
 
      <i-button type="primary" shape="circle" icon="ios-search"></i-button>
      <i-button type="primary" icon="ios-search">搜索</i-button>
e1596b7e   梁灏   add Button UI 
206
 
      <br><br>
d6342fe1   jingsam   fixed ie bug 
207
 
      <i-button type="ghost" shape="circle">
e1596b7e   梁灏   add Button UI 
208
 
          <Icon type="search"></Icon>
d6342fe1   jingsam   fixed ie bug 
209
210
 
      </i-button>
      <i-button type="ghost">
e1596b7e   梁灏   add Button UI 
211
212
 
          <Icon type="search"></Icon>
          搜索
d6342fe1   jingsam   fixed ie bug 
213
214
 
      </i-button>
      <i-button type="ghost" shape="circle" size="large">
e1596b7e   梁灏   add Button UI 
215
 
          <Icon type="search"></Icon>
d6342fe1   jingsam   fixed ie bug 
216
217
 
      </i-button>
      <i-button type="ghost" shape="circle" size="small">
e1596b7e   梁灏   add Button UI 
218
 
          <Icon type="search"></Icon>
d6342fe1   jingsam   fixed ie bug 
219
 
      </i-button>
e1596b7e   梁灏   add Button UI 
220
 
      <br><br><br>
d6342fe1   jingsam   fixed ie bug 
221
222
223
224
 
      <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 
225
226
 
          <span v-if="!loading">Click me!</span>
          <span v-else>Loading...</span>
d6342fe1   jingsam   fixed ie bug 
227
228
 
      </i-button>
      <i-button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
e1596b7e   梁灏   add Button UI 
229
230
 
          <span v-if="!loading2">Click me!</span>
          <span v-else>Loading...</span>
d6342fe1   jingsam   fixed ie bug 
231
 
      </i-button>
e1596b7e   梁灏   add Button UI 
232
233
 
      <h4>基本</h4>
      <Button-group size="large">
d6342fe1   jingsam   fixed ie bug 
234
235
 
          <i-button>取消</i-button>
          <i-button type="primary">确定</i-button>
e1596b7e   梁灏   add Button UI 
236
 
      </Button-group>
7fa943eb   梁灏   init 
237
 
      <Button-group>
d6342fe1   jingsam   fixed ie bug 
238
239
240
 
          <i-button type="primary">L</i-button>
          <i-button>M</i-button>
          <i-button type="ghost">R</i-button>
698e3b61   梁灏   iButton add some ... 
241
 
          <i-button type="dashed">R</i-button>
e1596b7e   梁灏   add Button UI 
242
243
244
 
      </Button-group>
      <h4>配合图标</h4>
      <Button-group>
d6342fe1   jingsam   fixed ie bug 
245
 
          <i-button type="primary">
e1596b7e   梁灏   add Button UI 
246
247
 
              <Icon type="chevron-left"></Icon>
              前进
d6342fe1   jingsam   fixed ie bug 
248
249
 
          </i-button>
          <i-button type="primary">
e1596b7e   梁灏   add Button UI 
250
251
 
              后退
              <Icon type="chevron-right"></Icon>
d6342fe1   jingsam   fixed ie bug 
252
 
          </i-button>
e1596b7e   梁灏   add Button UI 
253
254
 
      </Button-group>
      <Button-group>
d6342fe1   jingsam   fixed ie bug 
255
256
 
          <i-button type="primary" icon="cloud"></i-button>
          <i-button type="primary" icon="upload"></i-button>
7fa943eb   梁灏   init 
257
 
      </Button-group>
7fa943eb   梁灏   init 
258
259
 
  </template>
  <script>
7fa943eb   梁灏   init 
260
 
      export default {
7fa943eb   梁灏   init 
261
 
          props: {
d6342fe1   jingsam   fixed ie bug 
262
7fa943eb   梁灏   init 
263
264
265
 
          },
          data () {
              return {
e1596b7e   梁灏   add Button UI 
266
 
                  loading: false,
72493927   梁灏   fixed bug: Can no... 
267
 
                  loading2: false,
8a83e7c4   梁灏   update Form 
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
 
                  model6: '',
                  cityList: [
                      {
                          value: 'beijing',
                          label: '北京市'
                      },
                      {
                          value: 'shanghai',
                          label: '上海市'
                      },
                      {
                          value: 'shenzhen',
                          label: '深圳市'
                      },
                      {
                          value: 'hangzhou',
                          label: '杭州市'
                      },
                      {
                          value: 'nanjing',
                          label: '南京市'
                      },
                      {
                          value: 'chongqing',
                          label: '重庆市'
                      }
                  ],
                  model1: ''
d6342fe1   jingsam   fixed ie bug 
296
 
              }
7fa943eb   梁灏   init 
297
 
          },
7fa943eb   梁灏   init 
298
 
          methods: {
e1596b7e   梁灏   add Button UI 
299
300
 
              toLoading () {
                  this.loading = true;
7fa943eb   梁灏   init 
301
 
              },
e1596b7e   梁灏   add Button UI 
302
303
 
              toLoading2 () {
                  this.loading2 = true;
7fa943eb   梁灏   init 
304
305
306
307
 
              }
          }
      }
  </script>