Vben AdminPage
页面相关组件
PageWrapper
用于包裹页面组件
Usage
<template>
<div>
<PageWrapper>
<template #left>left</template>
<template #right>right</template>
</PageWrapper>
</div>
</template>
<script>
import { PageWrapper } from '/@/components/Page';
import { defineComponent } from 'vue';
export default defineComponent({
components: { PageWrapper },
setup() {
return {};
},
});
</script>
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | string | - | pageHeader title |
| dense | 是否缩小主体区域 | false | 为 true 将会取消 padding/margin |
| content | string | - | pageHeader Content 内容 |
| contentStyle | object | - | 主体区域样式 |
| contentClass | string | - | 主体区域 class |
| contentBackground | boolean | - | 主体区域背景 |
| contentFullHeight | boolean | false | 主体区域是否占满整个屏幕高度 |
| fixedHeight | boolean | false | 固定主体区域高度 |
Slots
pageHeader 的 slot 都支持
| 名称 | 说明 |
|---|---|
| leftFooter | PageFooter 左侧区域 |
| rightFooter | PageFooter 右侧区域 |
| headerContent | pageHeader 主体内容 |
| default | 主体区域 |
PageFooter
用于页面底部工具栏
使用
<template>
<div>
<PageFooter>
<template #left>left</template>
<template #right>right</template>
</PageFooter>
</div>
</template>
<script>
import { PageFooter } from '/@/components/Page';
import { defineComponent } from 'vue';
export default defineComponent({
components: { PageFooter },
setup() {
return {};
},
});
</script>
Slots
| 名称 | 说明 |
|---|---|
| left | 左侧区域 |
| right | 右侧区域 |