From bc6eb6f33dc821660e2d1ea3817b14b5d82e2704 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Thu, 21 Jun 2018 09:57:38 +0800
Subject: [PATCH] Button add to, replace, target prop, #3402

---
 examples/routers/button.vue      | 300 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/button/button.vue |  41 +++++++++++++++++++++++++++++++++++++++--
 2 files changed, 191 insertions(+), 150 deletions(-)

diff --git a/examples/routers/button.vue b/examples/routers/button.vue
index fe85a11..9439903 100644
--- a/examples/routers/button.vue
+++ b/examples/routers/button.vue
@@ -1,3 +1,154 @@
+<template>
+    <div>
+        <Button to="/menu">Open Menu</Button>
+        <Button to="/menu" replace>Open Menu Replace</Button>
+        <Button to="//iviewui.com" target="_blank">Open iView</Button>
+        <hr>
+        <Icon custom="i-icon i-icon-search" />
+        <Icon custom="i-icon i-icon-video" size="24" color="#ff6600" />
+        <Icon custom="i-icon i-icon-time" />
+        <Icon type="ionic" />
+        <Button icon="ionic">Default</Button>
+        <Button custom-icon="i-icon i-icon-search">Default</Button>
+        <Button icon="ionic" shape="circle"></Button>
+        <Button custom-icon="i-icon i-icon-video" shape="circle"></Button>
+        <hr>
+        <Button>Default</Button>
+        <Button type="primary">Primary</Button>
+        <Button type="ghost">Ghost</Button>
+        <Button type="dashed">Dashed</Button>
+        <Button type="text">Text</Button>
+        <br><br>
+        <Button type="info">Info</Button>
+        <Button type="success">Success</Button>
+        <Button type="warning">Warning</Button>
+        <Button type="error">Error</Button>
+        <br><br>
+        <Button type="primary" shape="circle" icon="ios-search"></Button>
+        <Button type="primary" icon="ios-search">Search</Button>
+        <Button type="primary" shape="circle" icon="ios-search">Search</Button>
+        <Button type="primary" shape="circle">Circle</Button>
+        <br><br>
+        <Button type="ghost" shape="circle" icon="ios-search"></Button>
+        <Button type="ghost" icon="ios-search">Search</Button>
+        <Button type="ghost" shape="circle" icon="ios-search">Search</Button>
+        <Button type="ghost" shape="circle">Circle</Button>
+        <br><br>
+        <Button>Default</Button>
+        <Button disabled>Default(Disabled)</Button>
+        <br>
+        <Button type="primary">Primary</Button>
+        <Button type="primary" disabled>Primary(Disabled)</Button>
+        <br>
+        <Button type="ghost">Ghost</Button>
+        <Button type="ghost" disabled>Ghost(Disabled)</Button>
+        <br>
+        <Button type="dashed">Dashed</Button>
+        <Button type="dashed" disabled>Dashed(Disabled)</Button>
+        <br>
+        <Button type="text">Text</Button>
+        <Button type="text" disabled>Text(Disabled)</Button>
+        <br><br>
+
+        <br><br>
+        <h4>基本</h4>
+        <br><br>
+        <Button-group>
+            <Button>取消</Button>
+            <Button type="primary">确定</Button>
+        </Button-group>
+        <Button-group>
+            <Button disabled>昨日</Button>
+            <Button disabled>今日</Button>
+            <Button disabled>明日</Button>
+        </Button-group>
+        <Button-group>
+            <Button type="primary">L</Button>
+            <Button>M</Button>
+            <Button type="ghost">M</Button>
+            <Button type="dashed">R</Button>
+        </Button-group>
+        <br><br>
+        <h4>配合图标</h4>
+        <br><br>
+        <Button-group>
+            <Button type="primary">
+                <Icon type="chevron-left"></Icon>
+                前进
+            </Button>
+            <Button type="primary">
+                后退
+                <Icon type="chevron-right"></Icon>
+            </Button>
+        </Button-group>
+        <Button-group>
+            <Button type="primary" icon="ios-skipbackward"></Button>
+            <Button type="primary" icon="ios-skipforward"></Button>
+        </Button-group>
+        <Button-group>
+            <Button type="ghost" icon="ios-color-wand-outline"></Button>
+            <Button type="ghost" icon="ios-sunny-outline"></Button>
+            <Button type="ghost" icon="ios-crop"></Button>
+            <Button type="ghost" icon="ios-color-filter-outline"></Button>
+        </Button-group>
+        <br><br>
+        <h4>圆角</h4>
+        <br><br>
+        <Button-group shape="circle">
+            <Button type="primary">
+                <Icon type="chevron-left"></Icon>
+                前进
+            </Button>
+            <Button type="primary">
+                后退
+                <Icon type="chevron-right"></Icon>
+            </Button>
+        </Button-group>
+        <Button-group shape="circle">
+            <Button type="primary" icon="ios-skipbackward"></Button>
+            <Button type="primary" icon="ios-skipforward"></Button>
+        </Button-group>
+        <Button-group shape="circle">
+            <Button type="ghost" icon="ios-color-wand-outline"></Button>
+            <Button type="ghost" icon="ios-sunny-outline"></Button>
+            <Button type="ghost" icon="ios-crop"></Button>
+            <Button type="ghost" icon="ios-color-filter-outline"></Button>
+        </Button-group>
+        <br><br>
+        <h4>尺寸</h4>
+        <br><br>
+        <Button-group size="large">
+            <Button type="ghost">Large</Button>
+            <Button type="ghost">Large</Button>
+        </Button-group>
+        <Button-group>
+            <Button type="ghost">Default</Button>
+            <Button type="ghost">Default</Button>
+        </Button-group>
+        <Button-group size="small">
+            <Button type="ghost">Small</Button>
+            <Button type="ghost">Small</Button>
+        </Button-group>
+        <br><br>
+        <Button-group size="large" shape="circle">
+            <Button type="ghost">Large</Button>
+            <Button type="ghost">Large</Button>
+        </Button-group>
+        <Button-group shape="circle">
+            <Button type="ghost">Default</Button>
+            <Button type="ghost">Default</Button>
+        </Button-group>
+        <Button-group size="small" shape="circle">
+            <Button type="ghost">Small</Button>
+            <Button type="ghost">Small</Button>
+        </Button-group>
+    </div>
+</template>
+<script>
+    export default {
+
+    }
+</script>
 <style>
     @font-face {
         font-family: "iconfont";
@@ -289,151 +440,4 @@
     .i-icon-financial_fill:before { content: "\e765"; }
 
     .i-icon-commodity:before { content: "\e766"; }
-</style>
-<template>
-    <div>
-        <Icon custom="i-icon i-icon-search" />
-        <Icon custom="i-icon i-icon-video" size="24" color="#ff6600" />
-        <Icon custom="i-icon i-icon-time" />
-        <Icon type="ionic" />
-        <Button icon="ionic">Default</Button>
-        <Button custom-icon="i-icon i-icon-search">Default</Button>
-        <Button icon="ionic" shape="circle"></Button>
-        <Button custom-icon="i-icon i-icon-video" shape="circle"></Button>
-        <hr>
-        <Button>Default</Button>
-        <Button type="primary">Primary</Button>
-        <Button type="ghost">Ghost</Button>
-        <Button type="dashed">Dashed</Button>
-        <Button type="text">Text</Button>
-        <br><br>
-        <Button type="info">Info</Button>
-        <Button type="success">Success</Button>
-        <Button type="warning">Warning</Button>
-        <Button type="error">Error</Button>
-        <br><br>
-        <Button type="primary" shape="circle" icon="ios-search"></Button>
-        <Button type="primary" icon="ios-search">Search</Button>
-        <Button type="primary" shape="circle" icon="ios-search">Search</Button>
-        <Button type="primary" shape="circle">Circle</Button>
-        <br><br>
-        <Button type="ghost" shape="circle" icon="ios-search"></Button>
-        <Button type="ghost" icon="ios-search">Search</Button>
-        <Button type="ghost" shape="circle" icon="ios-search">Search</Button>
-        <Button type="ghost" shape="circle">Circle</Button>
-        <br><br>
-        <Button>Default</Button>
-        <Button disabled>Default(Disabled)</Button>
-        <br>
-        <Button type="primary">Primary</Button>
-        <Button type="primary" disabled>Primary(Disabled)</Button>
-        <br>
-        <Button type="ghost">Ghost</Button>
-        <Button type="ghost" disabled>Ghost(Disabled)</Button>
-        <br>
-        <Button type="dashed">Dashed</Button>
-        <Button type="dashed" disabled>Dashed(Disabled)</Button>
-        <br>
-        <Button type="text">Text</Button>
-        <Button type="text" disabled>Text(Disabled)</Button>
-        <br><br>
-
-        <br><br>
-        <h4>基本</h4>
-        <br><br>
-        <Button-group>
-            <Button>取消</Button>
-            <Button type="primary">确定</Button>
-        </Button-group>
-        <Button-group>
-            <Button disabled>昨日</Button>
-            <Button disabled>今日</Button>
-            <Button disabled>明日</Button>
-        </Button-group>
-        <Button-group>
-            <Button type="primary">L</Button>
-            <Button>M</Button>
-            <Button type="ghost">M</Button>
-            <Button type="dashed">R</Button>
-        </Button-group>
-        <br><br>
-        <h4>配合图标</h4>
-        <br><br>
-        <Button-group>
-            <Button type="primary">
-                <Icon type="chevron-left"></Icon>
-                前进
-            </Button>
-            <Button type="primary">
-                后退
-                <Icon type="chevron-right"></Icon>
-            </Button>
-        </Button-group>
-        <Button-group>
-            <Button type="primary" icon="ios-skipbackward"></Button>
-            <Button type="primary" icon="ios-skipforward"></Button>
-        </Button-group>
-        <Button-group>
-            <Button type="ghost" icon="ios-color-wand-outline"></Button>
-            <Button type="ghost" icon="ios-sunny-outline"></Button>
-            <Button type="ghost" icon="ios-crop"></Button>
-            <Button type="ghost" icon="ios-color-filter-outline"></Button>
-        </Button-group>
-        <br><br>
-        <h4>圆角</h4>
-        <br><br>
-        <Button-group shape="circle">
-            <Button type="primary">
-                <Icon type="chevron-left"></Icon>
-                前进
-            </Button>
-            <Button type="primary">
-                后退
-                <Icon type="chevron-right"></Icon>
-            </Button>
-        </Button-group>
-        <Button-group shape="circle">
-            <Button type="primary" icon="ios-skipbackward"></Button>
-            <Button type="primary" icon="ios-skipforward"></Button>
-        </Button-group>
-        <Button-group shape="circle">
-            <Button type="ghost" icon="ios-color-wand-outline"></Button>
-            <Button type="ghost" icon="ios-sunny-outline"></Button>
-            <Button type="ghost" icon="ios-crop"></Button>
-            <Button type="ghost" icon="ios-color-filter-outline"></Button>
-        </Button-group>
-        <br><br>
-        <h4>尺寸</h4>
-        <br><br>
-        <Button-group size="large">
-            <Button type="ghost">Large</Button>
-            <Button type="ghost">Large</Button>
-        </Button-group>
-        <Button-group>
-            <Button type="ghost">Default</Button>
-            <Button type="ghost">Default</Button>
-        </Button-group>
-        <Button-group size="small">
-            <Button type="ghost">Small</Button>
-            <Button type="ghost">Small</Button>
-        </Button-group>
-        <br><br>
-        <Button-group size="large" shape="circle">
-            <Button type="ghost">Large</Button>
-            <Button type="ghost">Large</Button>
-        </Button-group>
-        <Button-group shape="circle">
-            <Button type="ghost">Default</Button>
-            <Button type="ghost">Default</Button>
-        </Button-group>
-        <Button-group size="small" shape="circle">
-            <Button type="ghost">Small</Button>
-            <Button type="ghost">Small</Button>
-        </Button-group>
-    </div>
-</template>
-<script>
-    export default {
-
-    }
-</script>
+</style>
\ No newline at end of file
diff --git a/src/components/button/button.vue b/src/components/button/button.vue
index 5fb6d81..4ed5943 100644
--- a/src/components/button/button.vue
+++ b/src/components/button/button.vue
@@ -1,9 +1,21 @@
 <template>
+    <a
+        v-if="to"
+        :class="classes"
+        :disabled="disabled"
+        :href="linkUrl"
+        :target="target"
+        @click="handleClickLink">
+        <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
+        <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
+        <span v-if="showSlot" ref="slot"><slot></slot></span>
+    </a>
     <button
+        v-else
         :type="htmlType"
         :class="classes"
         :disabled="disabled"
-        @click="handleClick">
+        @click="handleClickLink">
         <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
         <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
         <span v-if="showSlot" ref="slot"><slot></slot></span>
@@ -12,11 +24,13 @@
 <script>
     import Icon from '../icon';
     import { oneOf } from '../../utils/assist';
+    import mixinsLink from '../../mixins/link';
 
     const prefixCls = 'ivu-btn';
 
     export default {
         name: 'Button',
+        mixins: [ mixinsLink ],
         components: { Icon },
         props: {
             type: {
@@ -53,6 +67,20 @@
             long: {
                 type: Boolean,
                 default: false
+            },
+            to: {
+                type: [Object, String]
+            },
+            replace: {
+                type: Boolean,
+                default: false
+            },
+            target: {
+                type: String,
+                validator (value) {
+                    return oneOf(value, ['_blank', '_self', '_parent', '_top']);
+                },
+                default: '_self'
             }
         },
         data () {
@@ -76,8 +104,17 @@
             }
         },
         methods: {
-            handleClick (event) {
+            handleClickLink (event) {
                 this.$emit('click', event);
+
+                if (this.to) {
+                    if (this.target === '_blank') {
+                        return false;
+                    } else {
+                        event.preventDefault();
+                        this.handleClick();
+                    }
+                }
             }
         },
         mounted () {
--
libgit2 0.21.4