![](https://i-blog.csdnimg.cn/blog_migrate/dd53db74a1db769978c96bdba7535b94.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fa1fde311f2f76a2b8f8bad643b52c4f.png)
//需要标题
<mation-card :is-header="true">
<div slot="x_header">{{header}}</div>
</mation-card>
//不需要标题(图二)
<mation-card></mation-card>
<template>
<div class="xx_card" :style="{height:height}">
<div class="xx_card_header" v-if="isHeader">
<slot name="x_header">{{ header }}</slot>
</div>
<div class="x_body" :style="bodyStyle">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "MationCard",
props: {
isHeader: Boolean,
header: {},
bodyStyle: {},
shadow: {
type: String
},
height: {
type: String,
default: ''
},
},
// mounted(){
// alert(this.height)
// },
}
</script>
<style scoped>
.xx_card{
padding: 10px;
margin-top: 5px;
margin-left: 5px;
border-radius: 10px;
box-sizing: border-box;
background-color: #FFFFFF40;
box-shadow: #d7d7d7 0 0 2px;
}
.xx_card_header {
min-height: 30px;
color: #20b2aa;
border-bottom: 1px solid #20b2aa;
font-weight: bolder;
font-size: 18px;
padding: 3px 10px
}
.x_body{
padding: 5px 2px;
}
</style>