使用示例

Azil原创大约 1 分钟

单内容页面

为什么单个页面也推荐使用该组件呢？这种简单的布局不应该直接用几个div组合就行吗？

满足系统主题布局需求，方便后续接入不同的UI设计，通过调整组件来实现。
统一使用虚拟滚动条来实现内容区域的滚动，使页面始终充满屏幕。
一致的视觉效果，提高交互体验感。

<template>
  <page-grid>
    <template #c-header>
      头部区域
    </template>
    <div>
      内容填充区域
    </div>
  </page-grid>
</template>

左侧可收起的页面

一般用于左侧是树，右侧内容根据不同的叶子节点变化的场景。

例如：用户管理

<template>
  <page-grid leftWidth="220px">
    <template #left>
      可收起区域
    </template>
    <template #c-header>
      头部按钮区域
    </template>
    <div>
      内容填充区域
    </div>
  </page-grid>
</template>

左右联动双内容页面

一般用于左侧是批次单内容，右侧是批次的详细数据。

例如：字典管理

<template>
  <page-grid width="500px">
    <template #c-header>
      左侧头部区域
    </template>
    <div>
      左侧内容填充区域
    </div>
    <template #right>
      <!-- 在实际开发中，此处一般为引入组件 -->
      <page-grid>
        <template #c-header>
          右侧头部区域
        </template>
        <div>
          右侧内容填充区域
        </div>
      </page-grid>
    </template>
  </page-grid>
</template>

全部演示

<template>
  <page-grid leftWidth="220px" width="500px">
    <template #header>
      整体头部
    </template>
    <template #left>
      可收起区域
    </template>
    <template #left-footer-button>
      可收起区域按钮区
    </template>
    <template #left-footer-button>
      可收起区域底部
    </template>
    <template #c-header>
      左侧头部区域
    </template>
    <div>
      右侧内容填充区域
    </div>
    <template #c-footer>
      左侧内容底部
    </template>
    <template #right>
      <div>开始</div>
      <div>结束</div>
    </template>
    <template #footer>
      总体底部
    </template>
  </page-grid>
</template>