other / 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 152 <style>
2 153 @font-face {
3 154 font-family: "iconfont";
... ... @@ -289,151 +440,4 @@
289 440 .i-icon-financial_fill:before { content: "\e765"; }
290 441  
291 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 444 \ No newline at end of file
... ...
src/components/button/button.vue
  Show/Hide comments   View file @bc6eb6f
1 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 13 <button
  14 + v-else
3 15 :type="htmlType"
4 16 :class="classes"
5 17 :disabled="disabled"
6   - @click="handleClick">
  18 + @click="handleClickLink">
7 19 <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
8 20 <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
9 21 <span v-if="showSlot" ref="slot"><slot></slot></span>
... ... @@ -12,11 +24,13 @@
12 24 <script>
13 25 import Icon from '../icon';
14 26 import { oneOf } from '../../utils/assist';
  27 + import mixinsLink from '../../mixins/link';
15 28  
16 29 const prefixCls = 'ivu-btn';
17 30  
18 31 export default {
19 32 name: 'Button',
  33 + mixins: [ mixinsLink ],
20 34 components: { Icon },
21 35 props: {
22 36 type: {
... ... @@ -53,6 +67,20 @@
53 67 long: {
54 68 type: Boolean,
55 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 86 data () {
... ... @@ -76,8 +104,17 @@
76 104 }
77 105 },
78 106 methods: {
79   - handleClick (event) {
  107 + handleClickLink (event) {
80 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 120 mounted () {
... ...