From da404a1d3e2d43eceeb6a260d9c194e6c0552db2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 5 Sep 2019 10:31:26 +0800
Subject: [PATCH] Card add to, replace, target, append prop

---
 examples/routers/card.vue       |  2 +-
 src/components/card/card.vue    | 31 +++++++++++++++++++++++++++++--
 src/styles/components/card.less |  3 ++-
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/examples/routers/card.vue b/examples/routers/card.vue
index 5fa851db..f5c9b072 100644
--- a/examples/routers/card.vue
+++ b/examples/routers/card.vue
@@ -1,5 +1,5 @@
 <template>
-    <Card style="width:350px">
+    <Card style="width:350px" to="/button">
         <p slot="title">
             <Icon type="ios-film-outline"></Icon>
             <span>经典电影</span>
diff --git a/src/components/card/card.vue b/src/components/card/card.vue
index 3bdc788e..0544687e 100644
--- a/src/components/card/card.vue
+++ b/src/components/card/card.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes">
+    <component :is="tagName" :class="classes" v-bind="tagProps" @click="handleClickLink">
         <div :class="headClasses" v-if="showHead"><slot name="title">
             <p v-if="title">
                 <Icon v-if="icon" :type="icon"></Icon>
@@ -8,15 +8,17 @@
         </slot></div>
         <div :class="extraClasses" v-if="showExtra"><slot name="extra"></slot></div>
         <div :class="bodyClasses" :style="bodyStyles"><slot></slot></div>
-    </div>
+    </component>
 </template>
 <script>
     const prefixCls = 'ivu-card';
     const defaultPadding = 16;
     import Icon from '../icon/icon.vue';
+    import mixinsLink from '../../mixins/link';
 
     export default {
         name: 'Card',
+        mixins: [ mixinsLink ],
         components: { Icon },
         props: {
             bordered: {
@@ -76,6 +78,31 @@
                 } else {
                     return '';
                 }
+            },
+            // Point out if it should render as <a> tag
+            isHrefPattern () {
+                const { to } = this;
+                return !!to;
+            },
+            tagName () {
+                const { isHrefPattern } = this;
+                return isHrefPattern ? 'a' : 'div';
+            },
+            tagProps () {
+                const { isHrefPattern } = this;
+                if (isHrefPattern) {
+                    const { linkUrl,target } = this;
+                    return { href: linkUrl, target };
+                } else {
+                    return {};
+                }
+            }
+        },
+        methods: {
+            handleClickLink (event) {
+                if (!this.isHrefPattern) return;
+                const openInNewWindow = event.ctrlKey || event.metaKey;
+                this.handleCheckClick(event, openInNewWindow);
             }
         },
         mounted () {
diff --git a/src/styles/components/card.less b/src/styles/components/card.less
index f6a4fc19..a4fe8a2d 100644
--- a/src/styles/components/card.less
+++ b/src/styles/components/card.less
@@ -1,6 +1,7 @@
 @card-prefix-cls: ~"@{css-prefix}card";
 
 .@{card-prefix-cls}{
+    display: block;
     background: #fff;
     border-radius: @border-radius-small;
     font-size: @font-size-base;
@@ -47,4 +48,4 @@
     &-body {
         padding: 16px;
     }
-}
\ No newline at end of file
+}