chenhaodong / mew-iview

Commit d47ea998d6d43fd583a028a43fdb83b0c6b4666e

Authored by 梁灏
1 parent c755733a

support Button and Icon 

support Button and Icon
Showing 6 changed files with 107 additions and 308 deletions   Show diff stats
Inline Side-by-side
README.md
  Show/Hide comments   View file @d47ea99
... ... @@ -18,8 +18,8 @@
18 18 ## Programming
19 19 - [x] Grid
20 20 - [ ] Layout
21   -- [ ] Button
22   -- [ ] Icon
  21 +- [x] Button
  22 +- [x] Icon
23 23 - [ ] Input
24 24 - [ ] Radio
25 25 - [ ] Checkbox
... ...
src/components/button/button.vue
  Show/Hide comments   View file @d47ea99
... ... @@ -2,7 +2,7 @@
2 2 <button :type="htmlType" :class="classes" :disabled="disabled">
3 3 <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
4 4 <Icon :type="icon" v-if="icon && !loading"></Icon>
5   - <span v-if="showSlot" v-el:slot><slot></slot></span>
  5 + <span v-if="showSlot" ref="slot"><slot></slot></span>
6 6 </button>
7 7 </template>
8 8 <script>
... ... @@ -63,8 +63,8 @@
63 63 ];
64 64 }
65 65 },
66   - compiled () {
67   - this.showSlot = this.$els.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
  66 + mounted () {
  67 + this.showSlot = this.$refs.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
68 68 }
69 69 };
70 70 </script>
... ...
src/index.js
  Show/Hide comments   View file @d47ea99
... ... @@ -6,7 +6,7 @@ import Affix from &#39;./components/affix&#39;;
6 6 // import BackTop from './components/back-top';
7 7 // import Badge from './components/badge';
8 8 // import Breadcrumb from './components/breadcrumb';
9   -// import Button from './components/button';
  9 +import Button from './components/button';
10 10 // import Card from './components/card';
11 11 // import Carousel from './components/carousel';
12 12 // import Cascader from './components/cascader';
... ... @@ -16,7 +16,7 @@ import Affix from &#39;./components/affix&#39;;
16 16 // import DatePicker from './components/date-picker';
17 17 // import Dropdown from './components/dropdown';
18 18 // import Form from './components/form';
19   -// import Icon from './components/icon';
  19 +import Icon from './components/icon';
20 20 // import Input from './components/input';
21 21 // import InputNumber from './components/input-number';
22 22 // import LoadingBar from './components/loading-bar';
... ... @@ -54,7 +54,8 @@ const iview = {
54 54 // Breadcrumb,
55 55 // BreadcrumbItem: Breadcrumb.Item,
56 56 // iButton: Button,
57   - // ButtonGroup: Button.Group,
  57 + Button,
  58 + ButtonGroup: Button.Group,
58 59 // Card,
59 60 // Carousel,
60 61 // CarouselItem: Carousel.Item,
... ... @@ -70,7 +71,7 @@ const iview = {
70 71 // FormItem: Form.Item,
71 72 iCol: Col,
72 73 // Collapse,
73   - // Icon,
  74 + Icon,
74 75 // iInput: Input,
75 76 // InputNumber,
76 77 // LoadingBar,
... ...
test/app.vue
  Show/Hide comments   View file @d47ea99
... ... @@ -26,6 +26,7 @@ li + li {
26 26 <ul>
27 27 <li><router-link to="/affix">Affix</router-link></li>
28 28 <li><router-link to="/grid">Grid</router-link></li>
  29 + <li><router-link to="/button">Button</router-link></li>
29 30 </ul>
30 31 </nav>
31 32 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @d47ea99
... ... @@ -24,6 +24,10 @@ const router = new VueRouter({
24 24 {
25 25 path: '/grid',
26 26 component: require('./routers/grid.vue')
  27 + },
  28 + {
  29 + path: '/button',
  30 + component: require('./routers/button.vue')
27 31 }
28 32 ]
29 33 });
... ...
test/routers/button.vue
  Show/Hide comments   View file @d47ea99
1 1 <template>
2   - <h4>基本</h4>
3   - <br><br>
4   - <div style="background: #f60">
5   - <input-number></input-number>
6   - <Date-picker type="date" placeholder="选择日期" style="width: 100px;display: inline-block"></Date-picker>
7   - <i-input style="width: 100px"></i-input>
8   - <i-input type="text" placeholder="Username" style="width: 100px">
9   - <Icon type="ios-person-outline" slot="prepend"></Icon>
10   - </i-input>
11   - <i-button type="primary">按钮</i-button>
12   - <i-select :model.sync="model1" style="width:200px">
13   - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
14   - </i-select>
  2 + <div>
  3 + <h4>基本</h4>
  4 + <br><br>
  5 + <Button-group>
  6 + <Button>取消</Button>
  7 + <Button type="primary">确定</Button>
  8 + </Button-group>
  9 + <Button-group>
  10 + <Button disabled>昨日</Button>
  11 + <Button disabled>今日</Button>
  12 + <Button disabled>明日</Button>
  13 + </Button-group>
  14 + <Button-group>
  15 + <Button type="primary">L</Button>
  16 + <Button>M</Button>
  17 + <Button type="ghost">M</Button>
  18 + <Button type="dashed">R</Button>
  19 + </Button-group>
  20 + <br><br>
  21 + <h4>配合图标</h4>
  22 + <br><br>
  23 + <Button-group>
  24 + <Button type="primary">
  25 + <Icon type="chevron-left"></Icon>
  26 + 前进
  27 + </Button>
  28 + <Button type="primary">
  29 + 后退
  30 + <Icon type="chevron-right"></Icon>
  31 + </Button>
  32 + </Button-group>
  33 + <Button-group>
  34 + <Button type="primary" icon="ios-skipbackward"></Button>
  35 + <Button type="primary" icon="ios-skipforward"></Button>
  36 + </Button-group>
  37 + <Button-group>
  38 + <Button type="ghost" icon="ios-color-wand-outline"></Button>
  39 + <Button type="ghost" icon="ios-sunny-outline"></Button>
  40 + <Button type="ghost" icon="ios-crop"></Button>
  41 + <Button type="ghost" icon="ios-color-filter-outline"></Button>
  42 + </Button-group>
  43 + <br><br>
  44 + <h4>圆角</h4>
  45 + <br><br>
  46 + <Button-group shape="circle">
  47 + <Button type="primary">
  48 + <Icon type="chevron-left"></Icon>
  49 + 前进
  50 + </Button>
  51 + <Button type="primary">
  52 + 后退
  53 + <Icon type="chevron-right"></Icon>
  54 + </Button>
  55 + </Button-group>
  56 + <Button-group shape="circle">
  57 + <Button type="primary" icon="ios-skipbackward"></Button>
  58 + <Button type="primary" icon="ios-skipforward"></Button>
  59 + </Button-group>
  60 + <Button-group shape="circle">
  61 + <Button type="ghost" icon="ios-color-wand-outline"></Button>
  62 + <Button type="ghost" icon="ios-sunny-outline"></Button>
  63 + <Button type="ghost" icon="ios-crop"></Button>
  64 + <Button type="ghost" icon="ios-color-filter-outline"></Button>
  65 + </Button-group>
  66 + <br><br>
  67 + <h4>尺寸</h4>
  68 + <br><br>
  69 + <Button-group size="large">
  70 + <Button type="ghost">Large</Button>
  71 + <Button type="ghost">Large</Button>
  72 + </Button-group>
  73 + <Button-group>
  74 + <Button type="ghost">Default</Button>
  75 + <Button type="ghost">Default</Button>
  76 + </Button-group>
  77 + <Button-group size="small">
  78 + <Button type="ghost">Small</Button>
  79 + <Button type="ghost">Small</Button>
  80 + </Button-group>
  81 + <br><br>
  82 + <Button-group size="large" shape="circle">
  83 + <Button type="ghost">Large</Button>
  84 + <Button type="ghost">Large</Button>
  85 + </Button-group>
  86 + <Button-group shape="circle">
  87 + <Button type="ghost">Default</Button>
  88 + <Button type="ghost">Default</Button>
  89 + </Button-group>
  90 + <Button-group size="small" shape="circle">
  91 + <Button type="ghost">Small</Button>
  92 + <Button type="ghost">Small</Button>
  93 + </Button-group>
15 94 </div>
16   - <br><br>
17   - <i-button type="success">按钮</i-button>
18   - <i-button type="warning">按钮</i-button>
19   - <i-button type="error">按钮</i-button>
20   - <i-button type="info">按钮</i-button>
21   - <i-button icon="ios-search" type="success"></i-button>
22   - <br><br>
23   - <div style="width:400px">
24   - <i-button type="error" long size="small">按钮</i-button>
25   - </div>
26   - <br><br>
27   - <Button-group>
28   - <i-button>取消</i-button>
29   - <i-button type="primary">确定</i-button>
30   - </Button-group>
31   - <Button-group>
32   - <i-button disabled>昨日</i-button>
33   - <i-button disabled>今日</i-button>
34   - <i-button disabled>明日</i-button>
35   - </Button-group>
36   - <Button-group>
37   - <i-button type="primary">L</i-button>
38   - <i-button>M</i-button>
39   - <i-button type="ghost">M</i-button>
40   - <i-button type="dashed">R</i-button>
41   - </Button-group>
42   - <br><br>
43   - <h4>配合图标</h4>
44   - <br><br>
45   - <Button-group>
46   - <i-button type="primary">
47   - <Icon type="chevron-left"></Icon>
48   - 前进
49   - </i-button>
50   - <i-button type="primary">
51   - 后退
52   - <Icon type="chevron-right"></Icon>
53   - </i-button>
54   - </Button-group>
55   - <Button-group>
56   - <i-button type="primary" icon="ios-skipbackward"></i-button>
57   - <i-button type="primary" icon="ios-skipforward"></i-button>
58   - </Button-group>
59   - <Button-group>
60   - <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
61   - <i-button type="ghost" icon="ios-sunny-outline"></i-button>
62   - <i-button type="ghost" icon="ios-crop"></i-button>
63   - <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
64   - </Button-group>
65   - <br><br>
66   - <h4>圆角</h4>
67   - <br><br>
68   - <Button-group shape="circle">
69   - <i-button type="primary">
70   - <Icon type="chevron-left"></Icon>
71   - 前进
72   - </i-button>
73   - <i-button type="primary">
74   - 后退
75   - <Icon type="chevron-right"></Icon>
76   - </i-button>
77   - </Button-group>
78   - <Button-group shape="circle">
79   - <i-button type="primary" icon="ios-skipbackward"></i-button>
80   - <i-button type="primary" icon="ios-skipforward"></i-button>
81   - </Button-group>
82   - <Button-group shape="circle">
83   - <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
84   - <i-button type="ghost" icon="ios-sunny-outline"></i-button>
85   - <i-button type="ghost" icon="ios-crop"></i-button>
86   - <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
87   - </Button-group>
88   - <Button-group shape="circle" size="large">
89   - <i-button type="primary" icon="ios-skipbackward"></i-button>
90   - <i-button type="primary" icon="ios-skipforward"></i-button>
91   - </Button-group>
92   - <Button-group shape="circle" size="large">
93   - <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
94   - <i-button type="ghost" icon="ios-sunny-outline"></i-button>
95   - <i-button type="ghost" icon="ios-crop"></i-button>
96   - <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
97   - </Button-group>
98   - <Button-group shape="circle" size="small">
99   - <i-button type="primary" icon="ios-skipbackward"></i-button>
100   - <i-button type="primary" icon="ios-skipforward"></i-button>
101   - </Button-group>
102   - <Button-group shape="circle" size="small">
103   - <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
104   - <i-button type="ghost" icon="ios-sunny-outline"></i-button>
105   - <i-button type="ghost" icon="ios-crop"></i-button>
106   - <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
107   - </Button-group>
108   -
109   - <br><br>
110   - <h4>Vertical</h4>
111   - <br><br>
112   -
113   - <Button-group vertical>
114   - <i-button>取消</i-button>
115   - <i-button type="primary">确定</i-button>
116   - </Button-group>
117   - <Button-group vertical>
118   - <i-button>取消</i-button>
119   - <i-button type="primary">确定</i-button>
120   - </Button-group>
121   - <Button-group vertical>
122   - <i-button disabled>昨日</i-button>
123   - <i-button disabled>今日</i-button>
124   - <i-button disabled>明日</i-button>
125   - </Button-group>
126   - <Button-group vertical>
127   - <i-button type="primary">L</i-button>
128   - <i-button>M</i-button>
129   - <i-button type="ghost">M</i-button>
130   - <i-button type="dashed">R</i-button>
131   - </Button-group>
132   - <Button-group vertical>
133   - <i-button type="primary">
134   - <Icon type="chevron-left"></Icon>
135   - 前进
136   - </i-button>
137   - <i-button type="primary">
138   - 后退
139   - <Icon type="chevron-right"></Icon>
140   - </i-button>
141   - </Button-group>
142   - <Button-group vertical>
143   - <i-button type="primary" icon="ios-skipbackward"></i-button>
144   - <i-button type="primary" icon="ios-skipforward"></i-button>
145   - </Button-group>
146   - <Button-group vertical>
147   - <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
148   - <i-button type="ghost" icon="ios-sunny-outline"></i-button>
149   - <i-button type="ghost" icon="ios-crop"></i-button>
150   - <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
151   - </Button-group>
152   - <Button-group vertical size="large">
153   - <i-button type="primary" icon="ios-skipbackward"></i-button>
154   - <i-button type="primary" icon="ios-skipforward"></i-button>
155   - </Button-group>
156   - <Button-group shape="circle" vertical size="large">
157   - <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
158   - <i-button type="ghost" icon="ios-sunny-outline"></i-button>
159   - <i-button type="ghost" icon="ios-crop"></i-button>
160   - <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
161   - </Button-group>
162   - <Button-group shape="circle" vertical size="small">
163   - <i-button type="primary" icon="ios-skipbackward"></i-button>
164   - <i-button type="primary" icon="ios-skipforward"></i-button>
165   - </Button-group>
166   - <Button-group shape="circle" vertical size="small">
167   - <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
168   - <i-button type="ghost" icon="ios-sunny-outline"></i-button>
169   - <i-button type="ghost" icon="ios-crop"></i-button>
170   - <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
171   - </Button-group>
172   -
173   - <br><br>
174   - <i-button type="primary" icon="ios-search" shape="circle" size="small"></i-button>
175   - <i-button type="primary" icon="ios-search" shape="circle"></i-button>
176   - <i-button type="primary" icon="ios-search" shape="circle" size="large"></i-button>
177   - <i-button type="primary" icon="ios-search" shape="circle" size="small">搜索</i-button>
178   - <i-button type="primary" icon="ios-search" shape="circle">搜索</i-button>
179   - <i-button type="primary" icon="ios-search" shape="circle" size="large">搜索</i-button>
180   - <br><br>
181   - <i-button>Default</i-button>
182   - <i-button type="primary">Primary</i-button>
183   - <i-button type="ghost">Ghost</i-button>
184   - <i-button type="dashed">Dashed</i-button>
185   - <i-button type="text">文字按钮</i-button>
186   - <i-button type="text" disabled>文字按钮</i-button>
187   - <br><br>
188   - <i-button type="primary" size="large">Large</i-button>
189   - <i-button type="primary">Default</i-button>
190   - <i-button type="primary" size="small">Small</i-button>
191   - <br><br>
192   - <i-button>Default</i-button>
193   - <i-button disabled>Default(Disabled)</i-button>
194   - <br><br>
195   - <i-button type="primary">Primary</i-button>
196   - <i-button type="primary" disabled>Primary(Disabled)</i-button>
197   - <br><br>
198   - <i-button type="ghost">Ghost</i-button>
199   - <i-button type="ghost" disabled>Ghost(Disabled)</i-button>
200   - <br><br>
201   - <i-button type="dashed">dashed</i-button>
202   - <i-button type="dashed" disabled>dashed(Disabled)</i-button>
203   - <br><br>
204   - <i-button type="primary" shape="circle" icon="ios-search"></i-button>
205   - <i-button type="primary" icon="ios-search">搜索</i-button>
206   - <br><br>
207   - <i-button type="ghost" shape="circle">
208   - <Icon type="search"></Icon>
209   - </i-button>
210   - <i-button type="ghost">
211   - <Icon type="search"></Icon>
212   - 搜索
213   - </i-button>
214   - <i-button type="ghost" shape="circle" size="large">
215   - <Icon type="search"></Icon>
216   - </i-button>
217   - <i-button type="ghost" shape="circle" size="small">
218   - <Icon type="search"></Icon>
219   - </i-button>
220   - <br><br><br>
221   - <i-button type="primary" loading>Loading...</i-button>
222   - <i-button type="primary" loading size="large">Loading...</i-button>
223   - <i-button type="primary" loading size="small">Loading...</i-button>
224   - <i-button type="primary" :loading="loading" @click="toLoading">
225   - <span v-if="!loading">Click me!</span>
226   - <span v-else>Loading...</span>
227   - </i-button>
228   - <i-button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
229   - <span v-if="!loading2">Click me!</span>
230   - <span v-else>Loading...</span>
231   - </i-button>
232   - <h4>基本</h4>
233   - <Button-group size="large">
234   - <i-button>取消</i-button>
235   - <i-button type="primary">确定</i-button>
236   - </Button-group>
237   - <Button-group>
238   - <i-button type="primary">L</i-button>
239   - <i-button>M</i-button>
240   - <i-button type="ghost">R</i-button>
241   - <i-button type="dashed">R</i-button>
242   - </Button-group>
243   - <h4>配合图标</h4>
244   - <Button-group>
245   - <i-button type="primary">
246   - <Icon type="chevron-left"></Icon>
247   - 前进
248   - </i-button>
249   - <i-button type="primary">
250   - 后退
251   - <Icon type="chevron-right"></Icon>
252   - </i-button>
253   - </Button-group>
254   - <Button-group>
255   - <i-button type="primary" icon="cloud"></i-button>
256   - <i-button type="primary" icon="upload"></i-button>
257   - </Button-group>
258 95 </template>
259 96 <script>
260 97 export default {
261   - props: {
262 98  
263   - },
264   - data () {
265   - return {
266   - loading: false,
267   - loading2: false,
268   - model6: '',
269   - cityList: [
270   - {
271   - value: 'beijing',
272   - label: '北京市'
273   - },
274   - {
275   - value: 'shanghai',
276   - label: '上海市'
277   - },
278   - {
279   - value: 'shenzhen',
280   - label: '深圳市'
281   - },
282   - {
283   - value: 'hangzhou',
284   - label: '杭州市'
285   - },
286   - {
287   - value: 'nanjing',
288   - label: '南京市'
289   - },
290   - {
291   - value: 'chongqing',
292   - label: '重庆市'
293   - }
294   - ],
295   - model1: ''
296   - }
297   - },
298   - methods: {
299   - toLoading () {
300   - this.loading = true;
301   - },
302   - toLoading2 () {
303   - this.loading2 = true;
304   - }
305   - }
306 99 }
307 100 </script>
... ...