other / 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
@@ -18,8 +18,8 @@ @@ -18,8 +18,8 @@
18 ## Programming 18 ## Programming
19 - [x] Grid 19 - [x] Grid
20 - [ ] Layout 20 - [ ] Layout
21 -- [ ] Button  
22 -- [ ] Icon 21 +- [x] Button
  22 +- [x] Icon
23 - [ ] Input 23 - [ ] Input
24 - [ ] Radio 24 - [ ] Radio
25 - [ ] Checkbox 25 - [ ] Checkbox
src/components/button/button.vue
  Show/Hide comments   View file @d47ea99
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <button :type="htmlType" :class="classes" :disabled="disabled"> 2 <button :type="htmlType" :class="classes" :disabled="disabled">
3 <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon> 3 <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
4 <Icon :type="icon" v-if="icon && !loading"></Icon> 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 </button> 6 </button>
7 </template> 7 </template>
8 <script> 8 <script>
@@ -63,8 +63,8 @@ @@ -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 </script> 70 </script>
@@ -6,7 +6,7 @@ import Affix from &#39;./components/affix&#39;; @@ -6,7 +6,7 @@ import Affix from &#39;./components/affix&#39;;
6 // import BackTop from './components/back-top'; 6 // import BackTop from './components/back-top';
7 // import Badge from './components/badge'; 7 // import Badge from './components/badge';
8 // import Breadcrumb from './components/breadcrumb'; 8 // import Breadcrumb from './components/breadcrumb';
9 -// import Button from './components/button'; 9 +import Button from './components/button';
10 // import Card from './components/card'; 10 // import Card from './components/card';
11 // import Carousel from './components/carousel'; 11 // import Carousel from './components/carousel';
12 // import Cascader from './components/cascader'; 12 // import Cascader from './components/cascader';
@@ -16,7 +16,7 @@ import Affix from &#39;./components/affix&#39;; @@ -16,7 +16,7 @@ import Affix from &#39;./components/affix&#39;;
16 // import DatePicker from './components/date-picker'; 16 // import DatePicker from './components/date-picker';
17 // import Dropdown from './components/dropdown'; 17 // import Dropdown from './components/dropdown';
18 // import Form from './components/form'; 18 // import Form from './components/form';
19 -// import Icon from './components/icon'; 19 +import Icon from './components/icon';
20 // import Input from './components/input'; 20 // import Input from './components/input';
21 // import InputNumber from './components/input-number'; 21 // import InputNumber from './components/input-number';
22 // import LoadingBar from './components/loading-bar'; 22 // import LoadingBar from './components/loading-bar';
@@ -54,7 +54,8 @@ const iview = { @@ -54,7 +54,8 @@ const iview = {
54 // Breadcrumb, 54 // Breadcrumb,
55 // BreadcrumbItem: Breadcrumb.Item, 55 // BreadcrumbItem: Breadcrumb.Item,
56 // iButton: Button, 56 // iButton: Button,
57 - // ButtonGroup: Button.Group, 57 + Button,
  58 + ButtonGroup: Button.Group,
58 // Card, 59 // Card,
59 // Carousel, 60 // Carousel,
60 // CarouselItem: Carousel.Item, 61 // CarouselItem: Carousel.Item,
@@ -70,7 +71,7 @@ const iview = { @@ -70,7 +71,7 @@ const iview = {
70 // FormItem: Form.Item, 71 // FormItem: Form.Item,
71 iCol: Col, 72 iCol: Col,
72 // Collapse, 73 // Collapse,
73 - // Icon, 74 + Icon,
74 // iInput: Input, 75 // iInput: Input,
75 // InputNumber, 76 // InputNumber,
76 // LoadingBar, 77 // LoadingBar,
@@ -26,6 +26,7 @@ li + li { @@ -26,6 +26,7 @@ li + li {
26 <ul> 26 <ul>
27 <li><router-link to="/affix">Affix</router-link></li> 27 <li><router-link to="/affix">Affix</router-link></li>
28 <li><router-link to="/grid">Grid</router-link></li> 28 <li><router-link to="/grid">Grid</router-link></li>
  29 + <li><router-link to="/button">Button</router-link></li>
29 </ul> 30 </ul>
30 </nav> 31 </nav>
31 <router-view></router-view> 32 <router-view></router-view>
@@ -24,6 +24,10 @@ const router = new VueRouter({ @@ -24,6 +24,10 @@ const router = new VueRouter({
24 { 24 {
25 path: '/grid', 25 path: '/grid',
26 component: require('./routers/grid.vue') 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 <template> 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 </div> 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 </template> 95 </template>
259 <script> 96 <script>
260 export default { 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 </script> 100 </script>