前言
大家好 我是歌谣 今天继续给大家带来外部嵌套的讲解
主题数据
<template>
<div
:class="{'basic-container--block':block}"
class="basic-container">
<el-card>
<slot/>
</el-card>
</div>
</template>
<script>
export default {
name: "BasicContainer",
props: {
block: {
type: Boolean,
default: false
}
}
};
</script>
<style lang="scss">
.basic-container {
padding: 8px 10px;
border-radius: 10px;
box-sizing: border-box;
.el-card {
width: 100%;
background-color: transparent;
.el-card__body {
padding: 10px;
background: #fff;
}
}
&:first-child {
padding-top: 0;
}
&--block {
height: 100%;
.el-card {
height: 100%;
}
}
}
</style>
总结
这里使用基本插槽实现的数据方式 其中的slot的数据可以作为当前的数据插入 主体的逻辑不是很复杂 但是需要你细细揣摩 ok