<!-- 布局容器，由 aside、header、main 组成 -->
|
<template>
|
<el-row :gutter="8" class="h100">
|
<el-col :span="4" :xs="24" class="h100">
|
<el-card class="yw-layout-card yw-layout-aside h100" v-if="type === 'card'" shadow="hover">
|
<slot name="aside"> </slot>
|
</el-card>
|
<slot v-else name="aside"></slot>
|
</el-col>
|
<el-col :span="20" :xs="24" class="flex-column h100">
|
<el-card class="yw-layout-card yw-layout-header flex-0" v-if="type === 'card'" shadow="hover" :body-style="{ paddingBottom: '0' }">
|
<slot name="header"> </slot>
|
</el-card>
|
<slot v-else name="header"> </slot>
|
|
<el-card class="yw-layout-card yw-layout-main flex-auto" v-if="type === 'card'" shadow="hover" style="margin-top: 8px">
|
<slot name="main"> </slot>
|
</el-card>
|
<slot v-else name="main"> </slot>
|
|
<slot> </slot>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script setup lang="ts">
|
import { PropType } from 'vue';
|
|
const props = defineProps({
|
type: {
|
type: String as PropType<'card' | 'default'>,
|
default: 'default',
|
},
|
});
|
</script>
|
<style scoped lang="scss">
|
.yw-layout-card.el-card {
|
> :deep(.el-card__body) {
|
height: 100%;
|
}
|
}
|
</style>
|
