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

This commit is contained in:
BillyWang 2018-03-28 22:51:29 +08:00
parent d45d2ee061
commit 737e2df88b

View file

@ -1,6 +1,8 @@
<template> <template>
<div :class="classes"> <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="extraClasses" v-if="showExtra"><slot name="extra"></slot></div>
<div :class="bodyClasses" :style="bodyStyles"><slot></slot></div> <div :class="bodyClasses" :style="bodyStyles"><slot></slot></div>
</div> </div>
@ -8,10 +10,10 @@
<script> <script>
const prefixCls = 'ivu-card'; const prefixCls = 'ivu-card';
const defaultPadding = 16; const defaultPadding = 16;
import Icon from '../icon/index'
export default { export default {
name: 'Card', name: 'Card',
components: { Icon },
props: { props: {
bordered: { bordered: {
type: Boolean, type: Boolean,
@ -28,6 +30,12 @@
padding: { padding: {
type: Number, type: Number,
default: defaultPadding default: defaultPadding
},
title: {
type: String,
},
icon: {
type: String,
} }
}, },
data () { data () {
@ -67,7 +75,7 @@
} }
}, },
mounted () { mounted () {
this.showHead = this.$slots.title !== undefined; this.showHead = this.title || this.$slots.title !== undefined;
this.showExtra = this.$slots.extra !== undefined; this.showExtra = this.$slots.extra !== undefined;
} }
}; };