Vben Admin

Page

页面相关组件

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

属性类型默认值说明
titlestring-pageHeader title
dense是否缩小主体区域false为 true 将会取消 padding/margin
contentstring-pageHeader Content 内容
contentStyleobject-主体区域样式
contentClassstring-主体区域 class
contentBackgroundboolean-主体区域背景
contentFullHeightbooleanfalse主体区域是否占满整个屏幕高度
fixedHeightbooleanfalse固定主体区域高度

Slots

pageHeader 的 slot 都支持

名称说明
leftFooterPageFooter 左侧区域
rightFooterPageFooter 右侧区域
headerContentpageHeader 主体内容
default主体区域

用于页面底部工具栏

使用

<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右侧区域