Merge pull request #3255 from xiaofengsha/pr003

Card组件增加title和icon属性，简化用户使用

Merge pull request #3255 from xiaofengsha/pr003
Card组件增加title和icon属性，简化用户使用
Aresn · GitHub
2 parents d45d2ee0 a3e1344d
Showing 1 changed file with 15 additions and 3 deletions Show diff stats
src/components/card/card.vue
 <template>
     <div :class="classes">
-        <div :class="headClasses" v-if="showHead"><slot name="title"></slot></div>
+        <div :class="headClasses" v-if="showHead"><slot name="title">
+            <p v-if="title">
+                <Icon v-if="icon" :type="icon"></Icon>
+                {{title}}
+            </p>
+        </slot></div>
         <div :class="extraClasses" v-if="showExtra"><slot name="extra"></slot></div>
         <div :class="bodyClasses" :style="bodyStyles"><slot></slot></div>
     </div>
@@ -8,10 +13,11 @@
 <script>
     const prefixCls = 'ivu-card';
     const defaultPadding = 16;
+    import Icon from '../icon/icon.vue';
  
     export default {
         name: 'Card',
-
+        components: { Icon },
         props: {
             bordered: {
                 type: Boolean,
@@ -28,6 +34,12 @@
             padding: {
                 type: Number,
                 default: defaultPadding
+            },
+            title: {
+                type: String,
+            },
+            icon: {
+                type: String,
             }
         },
         data () {
@@ -67,7 +79,7 @@
             }
         },
         mounted () {
-            this.showHead = this.$slots.title !== undefined;
+            this.showHead = this.title || this.$slots.title !== undefined;
             this.showExtra = this.$slots.extra !== undefined;
         }
     };