Card add to, replace, target, append prop

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>

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 () {

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;
     }
-}
+}