Skip to content
Return to top
On this page

# FatContainer 容器 #

典型惟客云页面容器。

## 示例 #

简单内容:

查看代码
vue

    <template>
      <FatContainer title="页面标题">
        <template #extra>
          <el-button type="primary">新建</el-button>
        </template>
        <div class="block">这里可以放置页面主体内容</div>
      </FatContainer>
    </template>

    <script lang="tsx" setup>
      import { FatContainer } from '@wakeadmin/components';
    </script>

    <style lang="scss" scoped>
      .block {
        width: 100%;
        background-color: rgba(255, 145, 0, 0.5);
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>

带筛选:

查看代码
vue

    <template>
      <FatContainer title="页面标题">
        <template #extra>
          <el-button type="primary">新建</el-button>
        </template>
        <template #query>
          <div class="block" style="height: 200px">这里可以放置查询表单</div>
        </template>
        <div class="block">这里可以放置页面主体内容</div>
      </FatContainer>
    </template>

    <script lang="tsx" setup>
      import { FatContainer } from '@wakeadmin/components';
    </script>

    <style lang="scss" scoped>
      .block {
        width: 100%;
        background-color: rgba(255, 145, 0, 0.5);
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>

Tab 形式:

查看代码
vue

    <template>
      <FatContainer
        title="页面标题"
        :tabs="[
          { key: 'one', title: 'Hello' },
          { key: 'two', title: 'World' },
        ]"
      >
        <template #query>
          <div class="block" style="height: 200px">这里可以放置查询表单</div>
        </template>
        <div class="block">这里可以放置页面主体内容</div>
      </FatContainer>
    </template>

    <script lang="tsx" setup>
      import { FatContainer } from '@wakeadmin/components';
    </script>

    <style lang="scss" scoped>
      .block {
        width: 100%;
        background-color: rgba(255, 145, 0, 0.5);
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>

传统模式(旧的惟客云规范)

查看代码
vue

    <template>
      <FatContainer title="页面标题" legacy-mode>
        <template #extra>
          <el-button type="primary">新建</el-button>
        </template>
        <template #query>
          <div class="block" style="height: 200px">这里可以放置查询表单</div>
        </template>
        <div class="block">这里可以放置页面主体内容</div>
      </FatContainer>
    </template>

    <script lang="tsx" setup>
      import { FatContainer } from '@wakeadmin/components';
    </script>

    <style lang="scss" scoped>
      .block {
        width: 100%;
        background-color: rgba(255, 145, 0, 0.5);
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>

## API #