chenhaodong / mew-iview

Commit bc6eb6f33dc821660e2d1ea3817b14b5d82e2704

Authored by 梁灏
1 parent 3d1f3cf6

Button add to, replace, target prop, #3402

Showing 2 changed files with 191 additions and 150 deletions   Show diff stats
Inline Side-by-side
examples/routers/button.vue
  Show/Hide comments   View file @bc6eb6f
  1 +<template>
  2 + <div>
  3 + <Button to="/menu">Open Menu</Button>
  4 + <Button to="/menu" replace>Open Menu Replace</Button>
  5 + <Button to="//iviewui.com" target="_blank">Open iView</Button>
  6 + <hr>
  7 + <Icon custom="i-icon i-icon-search" />
  8 + <Icon custom="i-icon i-icon-video" size="24" color="#ff6600" />
  9 + <Icon custom="i-icon i-icon-time" />
  10 + <Icon type="ionic" />
  11 + <Button icon="ionic">Default</Button>
  12 + <Button custom-icon="i-icon i-icon-search">Default</Button>
  13 + <Button icon="ionic" shape="circle"></Button>
  14 + <Button custom-icon="i-icon i-icon-video" shape="circle"></Button>
  15 + <hr>
  16 + <Button>Default</Button>
  17 + <Button type="primary">Primary</Button>
  18 + <Button type="ghost">Ghost</Button>
  19 + <Button type="dashed">Dashed</Button>
  20 + <Button type="text">Text</Button>
  21 + <br><br>
  22 + <Button type="info">Info</Button>
  23 + <Button type="success">Success</Button>
  24 + <Button type="warning">Warning</Button>
  25 + <Button type="error">Error</Button>
  26 + <br><br>
  27 + <Button type="primary" shape="circle" icon="ios-search"></Button>
  28 + <Button type="primary" icon="ios-search">Search</Button>
  29 + <Button type="primary" shape="circle" icon="ios-search">Search</Button>
  30 + <Button type="primary" shape="circle">Circle</Button>
  31 + <br><br>
  32 + <Button type="ghost" shape="circle" icon="ios-search"></Button>
  33 + <Button type="ghost" icon="ios-search">Search</Button>
  34 + <Button type="ghost" shape="circle" icon="ios-search">Search</Button>
  35 + <Button type="ghost" shape="circle">Circle</Button>
  36 + <br><br>
  37 + <Button>Default</Button>
  38 + <Button disabled>Default(Disabled)</Button>
  39 + <br>
  40 + <Button type="primary">Primary</Button>
  41 + <Button type="primary" disabled>Primary(Disabled)</Button>
  42 + <br>
  43 + <Button type="ghost">Ghost</Button>
  44 + <Button type="ghost" disabled>Ghost(Disabled)</Button>
  45 + <br>
  46 + <Button type="dashed">Dashed</Button>
  47 + <Button type="dashed" disabled>Dashed(Disabled)</Button>
  48 + <br>
  49 + <Button type="text">Text</Button>
  50 + <Button type="text" disabled>Text(Disabled)</Button>
  51 + <br><br>
  52 +
  53 + <br><br>
  54 + <h4>基本</h4>
  55 + <br><br>
  56 + <Button-group>
  57 + <Button>取消</Button>
  58 + <Button type="primary">确定</Button>
  59 + </Button-group>
  60 + <Button-group>
  61 + <Button disabled>昨日</Button>
  62 + <Button disabled>今日</Button>
  63 + <Button disabled>明日</Button>
  64 + </Button-group>
  65 + <Button-group>
  66 + <Button type="primary">L</Button>
  67 + <Button>M</Button>
  68 + <Button type="ghost">M</Button>
  69 + <Button type="dashed">R</Button>
  70 + </Button-group>
  71 + <br><br>
  72 + <h4>配合图标</h4>
  73 + <br><br>
  74 + <Button-group>
  75 + <Button type="primary">
  76 + <Icon type="chevron-left"></Icon>
  77 + 前进
  78 + </Button>
  79 + <Button type="primary">
  80 + 后退
  81 + <Icon type="chevron-right"></Icon>
  82 + </Button>
  83 + </Button-group>
  84 + <Button-group>
  85 + <Button type="primary" icon="ios-skipbackward"></Button>
  86 + <Button type="primary" icon="ios-skipforward"></Button>
  87 + </Button-group>
  88 + <Button-group>
  89 + <Button type="ghost" icon="ios-color-wand-outline"></Button>
  90 + <Button type="ghost" icon="ios-sunny-outline"></Button>
  91 + <Button type="ghost" icon="ios-crop"></Button>
  92 + <Button type="ghost" icon="ios-color-filter-outline"></Button>
  93 + </Button-group>
  94 + <br><br>
  95 + <h4>圆角</h4>
  96 + <br><br>
  97 + <Button-group shape="circle">
  98 + <Button type="primary">
  99 + <Icon type="chevron-left"></Icon>
  100 + 前进
  101 + </Button>
  102 + <Button type="primary">
  103 + 后退
  104 + <Icon type="chevron-right"></Icon>
  105 + </Button>
  106 + </Button-group>
  107 + <Button-group shape="circle">
  108 + <Button type="primary" icon="ios-skipbackward"></Button>
  109 + <Button type="primary" icon="ios-skipforward"></Button>
  110 + </Button-group>
  111 + <Button-group shape="circle">
  112 + <Button type="ghost" icon="ios-color-wand-outline"></Button>
  113 + <Button type="ghost" icon="ios-sunny-outline"></Button>
  114 + <Button type="ghost" icon="ios-crop"></Button>
  115 + <Button type="ghost" icon="ios-color-filter-outline"></Button>
  116 + </Button-group>
  117 + <br><br>
  118 + <h4>尺寸</h4>
  119 + <br><br>
  120 + <Button-group size="large">
  121 + <Button type="ghost">Large</Button>
  122 + <Button type="ghost">Large</Button>
  123 + </Button-group>
  124 + <Button-group>
  125 + <Button type="ghost">Default</Button>
  126 + <Button type="ghost">Default</Button>
  127 + </Button-group>
  128 + <Button-group size="small">
  129 + <Button type="ghost">Small</Button>
  130 + <Button type="ghost">Small</Button>
  131 + </Button-group>
  132 + <br><br>
  133 + <Button-group size="large" shape="circle">
  134 + <Button type="ghost">Large</Button>
  135 + <Button type="ghost">Large</Button>
  136 + </Button-group>
  137 + <Button-group shape="circle">
  138 + <Button type="ghost">Default</Button>
  139 + <Button type="ghost">Default</Button>
  140 + </Button-group>
  141 + <Button-group size="small" shape="circle">
  142 + <Button type="ghost">Small</Button>
  143 + <Button type="ghost">Small</Button>
  144 + </Button-group>
  145 + </div>
  146 +</template>
  147 +<script>
  148 + export default {
  149 +
  150 + }
  151 +</script>
1 <style> 152 <style>
2 @font-face { 153 @font-face {
3 font-family: "iconfont"; 154 font-family: "iconfont";
@@ -289,151 +440,4 @@ @@ -289,151 +440,4 @@
289 .i-icon-financial_fill:before { content: "\e765"; } 440 .i-icon-financial_fill:before { content: "\e765"; }
290 441
291 .i-icon-commodity:before { content: "\e766"; } 442 .i-icon-commodity:before { content: "\e766"; }
292 -</style>  
293 -<template>  
294 - <div>  
295 - <Icon custom="i-icon i-icon-search" />  
296 - <Icon custom="i-icon i-icon-video" size="24" color="#ff6600" />  
297 - <Icon custom="i-icon i-icon-time" />  
298 - <Icon type="ionic" />  
299 - <Button icon="ionic">Default</Button>  
300 - <Button custom-icon="i-icon i-icon-search">Default</Button>  
301 - <Button icon="ionic" shape="circle"></Button>  
302 - <Button custom-icon="i-icon i-icon-video" shape="circle"></Button>  
303 - <hr>  
304 - <Button>Default</Button>  
305 - <Button type="primary">Primary</Button>  
306 - <Button type="ghost">Ghost</Button>  
307 - <Button type="dashed">Dashed</Button>  
308 - <Button type="text">Text</Button>  
309 - <br><br>  
310 - <Button type="info">Info</Button>  
311 - <Button type="success">Success</Button>  
312 - <Button type="warning">Warning</Button>  
313 - <Button type="error">Error</Button>  
314 - <br><br>  
315 - <Button type="primary" shape="circle" icon="ios-search"></Button>  
316 - <Button type="primary" icon="ios-search">Search</Button>  
317 - <Button type="primary" shape="circle" icon="ios-search">Search</Button>  
318 - <Button type="primary" shape="circle">Circle</Button>  
319 - <br><br>  
320 - <Button type="ghost" shape="circle" icon="ios-search"></Button>  
321 - <Button type="ghost" icon="ios-search">Search</Button>  
322 - <Button type="ghost" shape="circle" icon="ios-search">Search</Button>  
323 - <Button type="ghost" shape="circle">Circle</Button>  
324 - <br><br>  
325 - <Button>Default</Button>  
326 - <Button disabled>Default(Disabled)</Button>  
327 - <br>  
328 - <Button type="primary">Primary</Button>  
329 - <Button type="primary" disabled>Primary(Disabled)</Button>  
330 - <br>  
331 - <Button type="ghost">Ghost</Button>  
332 - <Button type="ghost" disabled>Ghost(Disabled)</Button>  
333 - <br>  
334 - <Button type="dashed">Dashed</Button>  
335 - <Button type="dashed" disabled>Dashed(Disabled)</Button>  
336 - <br>  
337 - <Button type="text">Text</Button>  
338 - <Button type="text" disabled>Text(Disabled)</Button>  
339 - <br><br>  
340 -  
341 - <br><br>  
342 - <h4>基本</h4>  
343 - <br><br>  
344 - <Button-group>  
345 - <Button>取消</Button>  
346 - <Button type="primary">确定</Button>  
347 - </Button-group>  
348 - <Button-group>  
349 - <Button disabled>昨日</Button>  
350 - <Button disabled>今日</Button>  
351 - <Button disabled>明日</Button>  
352 - </Button-group>  
353 - <Button-group>  
354 - <Button type="primary">L</Button>  
355 - <Button>M</Button>  
356 - <Button type="ghost">M</Button>  
357 - <Button type="dashed">R</Button>  
358 - </Button-group>  
359 - <br><br>  
360 - <h4>配合图标</h4>  
361 - <br><br>  
362 - <Button-group>  
363 - <Button type="primary">  
364 - <Icon type="chevron-left"></Icon>  
365 - 前进  
366 - </Button>  
367 - <Button type="primary">  
368 - 后退  
369 - <Icon type="chevron-right"></Icon>  
370 - </Button>  
371 - </Button-group>  
372 - <Button-group>  
373 - <Button type="primary" icon="ios-skipbackward"></Button>  
374 - <Button type="primary" icon="ios-skipforward"></Button>  
375 - </Button-group>  
376 - <Button-group>  
377 - <Button type="ghost" icon="ios-color-wand-outline"></Button>  
378 - <Button type="ghost" icon="ios-sunny-outline"></Button>  
379 - <Button type="ghost" icon="ios-crop"></Button>  
380 - <Button type="ghost" icon="ios-color-filter-outline"></Button>  
381 - </Button-group>  
382 - <br><br>  
383 - <h4>圆角</h4>  
384 - <br><br>  
385 - <Button-group shape="circle">  
386 - <Button type="primary">  
387 - <Icon type="chevron-left"></Icon>  
388 - 前进  
389 - </Button>  
390 - <Button type="primary">  
391 - 后退  
392 - <Icon type="chevron-right"></Icon>  
393 - </Button>  
394 - </Button-group>  
395 - <Button-group shape="circle">  
396 - <Button type="primary" icon="ios-skipbackward"></Button>  
397 - <Button type="primary" icon="ios-skipforward"></Button>  
398 - </Button-group>  
399 - <Button-group shape="circle">  
400 - <Button type="ghost" icon="ios-color-wand-outline"></Button>  
401 - <Button type="ghost" icon="ios-sunny-outline"></Button>  
402 - <Button type="ghost" icon="ios-crop"></Button>  
403 - <Button type="ghost" icon="ios-color-filter-outline"></Button>  
404 - </Button-group>  
405 - <br><br>  
406 - <h4>尺寸</h4>  
407 - <br><br>  
408 - <Button-group size="large">  
409 - <Button type="ghost">Large</Button>  
410 - <Button type="ghost">Large</Button>  
411 - </Button-group>  
412 - <Button-group>  
413 - <Button type="ghost">Default</Button>  
414 - <Button type="ghost">Default</Button>  
415 - </Button-group>  
416 - <Button-group size="small">  
417 - <Button type="ghost">Small</Button>  
418 - <Button type="ghost">Small</Button>  
419 - </Button-group>  
420 - <br><br>  
421 - <Button-group size="large" shape="circle">  
422 - <Button type="ghost">Large</Button>  
423 - <Button type="ghost">Large</Button>  
424 - </Button-group>  
425 - <Button-group shape="circle">  
426 - <Button type="ghost">Default</Button>  
427 - <Button type="ghost">Default</Button>  
428 - </Button-group>  
429 - <Button-group size="small" shape="circle">  
430 - <Button type="ghost">Small</Button>  
431 - <Button type="ghost">Small</Button>  
432 - </Button-group>  
433 - </div>  
434 -</template>  
435 -<script>  
436 - export default {  
437 -  
438 - }  
439 -</script> 443 +</style>
440 \ No newline at end of file 444 \ No newline at end of file
src/components/button/button.vue
  Show/Hide comments   View file @bc6eb6f
1 <template> 1 <template>
  2 + <a
  3 + v-if="to"
  4 + :class="classes"
  5 + :disabled="disabled"
  6 + :href="linkUrl"
  7 + :target="target"
  8 + @click="handleClickLink">
  9 + <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
  10 + <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
  11 + <span v-if="showSlot" ref="slot"><slot></slot></span>
  12 + </a>
2 <button 13 <button
  14 + v-else
3 :type="htmlType" 15 :type="htmlType"
4 :class="classes" 16 :class="classes"
5 :disabled="disabled" 17 :disabled="disabled"
6 - @click="handleClick"> 18 + @click="handleClickLink">
7 <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon> 19 <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
8 <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon> 20 <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
9 <span v-if="showSlot" ref="slot"><slot></slot></span> 21 <span v-if="showSlot" ref="slot"><slot></slot></span>
@@ -12,11 +24,13 @@ @@ -12,11 +24,13 @@
12 <script> 24 <script>
13 import Icon from '../icon'; 25 import Icon from '../icon';
14 import { oneOf } from '../../utils/assist'; 26 import { oneOf } from '../../utils/assist';
  27 + import mixinsLink from '../../mixins/link';
15 28
16 const prefixCls = 'ivu-btn'; 29 const prefixCls = 'ivu-btn';
17 30
18 export default { 31 export default {
19 name: 'Button', 32 name: 'Button',
  33 + mixins: [ mixinsLink ],
20 components: { Icon }, 34 components: { Icon },
21 props: { 35 props: {
22 type: { 36 type: {
@@ -53,6 +67,20 @@ @@ -53,6 +67,20 @@
53 long: { 67 long: {
54 type: Boolean, 68 type: Boolean,
55 default: false 69 default: false
  70 + },
  71 + to: {
  72 + type: [Object, String]
  73 + },
  74 + replace: {
  75 + type: Boolean,
  76 + default: false
  77 + },
  78 + target: {
  79 + type: String,
  80 + validator (value) {
  81 + return oneOf(value, ['_blank', '_self', '_parent', '_top']);
  82 + },
  83 + default: '_self'
56 } 84 }
57 }, 85 },
58 data () { 86 data () {
@@ -76,8 +104,17 @@ @@ -76,8 +104,17 @@
76 } 104 }
77 }, 105 },
78 methods: { 106 methods: {
79 - handleClick (event) { 107 + handleClickLink (event) {
80 this.$emit('click', event); 108 this.$emit('click', event);
  109 +
  110 + if (this.to) {
  111 + if (this.target === '_blank') {
  112 + return false;
  113 + } else {
  114 + event.preventDefault();
  115 + this.handleClick();
  116 + }
  117 + }
81 } 118 }
82 }, 119 },
83 mounted () { 120 mounted () {