需求

1 .基础容器，用来显示文字，列表，图文等内容.之后全局搜索的内容也是可以用这个容器来装的
2 .自定义标题，额外操作，主图内容，设置属性title,icon设置标题栏
3 .顺便看下slot用法
4 .各个部分要是独立操作的，也可以和其他组件一起使用，较为灵活
5 .还有一些css开关，简洁卡片，没有标题，只有内容区域。是否有卡片阴影，是否有卡片边框，是否有阴影。

<template>
    <div class="card">
        <div class="card-title">
            <slot name="title">
                这里是卡片的标题
            </slot>
        </div>
        <div class="card-content">
            <slot name="content">
                这里是卡片的内容
            </slot>
        </div>
        <div class="card-footer" v-if="showFooter">
            <slot name="footer">
                这里是卡片的按钮
            </slot>
        </div>        
    </div>
</template>
<script>
export default {
    props:{
        showFooter:{
            type:Boolean,
            default:true,
        }
    },
    data:function(){
        return {
            title:'子组件数据'
        }
    }
}
</script>
<style lang="less" src="./card.less"></style>
//card组件

//样式
@name:.card;
// 命名空间

@{name}{
    .ds;
    .fb_shu;
    .fb_jun;
    .b1(1px,#d9d9d9,3%);
    .h;
    box-shadow: @box-shadow2;
    max-width:400px;
    

    &-title{
        .ds;
        .fb_heng;
        .fb_jun;
        width:100%;
        height: 50px;
        border-bottom:@border;
    };
    &-content{
        width: 100%;
        min-height: 200px;
        max-height:300px;
        overflow-y: auto;

    };
    &-footer{
        .ds;
        .fb_heng;
        .fb_jun;
        width: 100%;
        border-top:@border;
        height:50px;       
    };
}


//使用
<Card>
            <template #title>
               <Card-title :title="titleValue" />
            </template>

            <template #content>
                
            </template>

            <template #footer>
                footer
            </template>
        </Card>