<!-- 布局容器，由 aside、main 组成 -->
|
<template>
|
<el-row :gutter="8" class="h-full">
|
<el-col :span="4" :xs="24" class="h100">
|
<el-card class="yw-layout-card 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-main flex-auto" v-if="type === 'card'" shadow="hover" style="margin-top: 8ppx">
|
<slot name="main"> </slot>
|
</el-card>
|
<slot v-else name="main"> </slot>
|
<slot> </slot>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script setup lang="ts">
|
import { definePropType } from 'element-plus/es/utils/vue/props/runtime';
|
|
const props = defineProps({
|
type: {
|
type: definePropType<'card' | 'default'>(String)
|
},
|
});
|
</script>
|
<style scoped lang="scss">
|
.yw-layout-card.el-card {
|
> :deep(.el-card__body) {
|
height: 100%;
|
}
|
}
|
</style>
|
