Layout 布局

Layout 组件需要配合 Header / Sidebar / Footer / Content 组件使用。

示例

基础布局

Layout 组件支持多种典型布局。

<template>
<article>
  <div class="mock-window">
    <veui-layout>
      <veui-header>Header</veui-header>
      <veui-layout>
        <veui-sidebar>
          <div class="center full">Sidebar</div>
        </veui-sidebar>
        <veui-layout>
          <veui-content>Content</veui-content>
          <veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
        </veui-layout>
      </veui-layout>
    </veui-layout>
  </div>
</article>
</template>

<script>
import { Layout, Header, Footer, Sidebar, Content } from 'veui'

export default {
  components: {
    'veui-layout': Layout,
    'veui-header': Header,
    'veui-footer': Footer,
    'veui-sidebar': Sidebar,
    'veui-content': Content
  }
}
</script>

<style lang="less" scoped>
.mock-window {
  height: 384px;
  transform: translate(0, 0); // bfc for fixed

  & > .veui-layout {
    min-width: 860px;
  }
}

.center,
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.full {
  height: 100%;
}
</style>

通顶侧边栏

在 GitHub 上编辑此页编辑

<template>
<article>
  <div class="mock-window">
    <veui-layout>
      <veui-sidebar>
        <div class="center full">Sidebar</div>
      </veui-sidebar>
      <veui-layout>
        <veui-header>Header</veui-header>
        <veui-layout>
          <veui-content>Content</veui-content>
          <veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
        </veui-layout>
      </veui-layout>
    </veui-layout>
  </div>
</article>
</template>

<script>
import { Layout, Header, Footer, Sidebar, Content } from 'veui'

export default {
  components: {
    'veui-layout': Layout,
    'veui-header': Header,
    'veui-footer': Footer,
    'veui-sidebar': Sidebar,
    'veui-content': Content
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="less" scoped>
.mock-window {
  height: 384px;
  transform: translate(0, 0); // bfc for fixed

  & > .veui-layout {
    min-width: 860px;
  }
}

.center,
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.full {
  height: 100%;
}
</style>

通栏底部

在 GitHub 上编辑此页编辑

<template>
<article>
  <div class="mock-window">
    <veui-layout>
      <veui-header>Header</veui-header>
      <veui-layout>
        <veui-sidebar>
          <div class="center full">Sidebar</div>
        </veui-sidebar>
        <veui-layout>
          <veui-content>Content</veui-content>
        </veui-layout>
      </veui-layout>
      <veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
    </veui-layout>
  </div>
</article>
</template>

<script>
import { Layout, Header, Footer, Sidebar, Content } from 'veui'

export default {
  components: {
    'veui-layout': Layout,
    'veui-header': Header,
    'veui-footer': Footer,
    'veui-sidebar': Sidebar,
    'veui-content': Content
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="less" scoped>
.mock-window {
  height: 384px;
  transform: translate(0, 0); // bfc for fixed

  & > .veui-layout {
    min-width: 860px;
  }
}

.center,
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.full {
  height: 100%;
}
</style>

吸顶/吸底布局

Header / Sidebar / Footer 组件均支持通过 sticky 属性设置吸顶/吸底。

当吸顶的布局头部和吸顶侧边栏一起使用需要在布局头部的父组件 Layout 上设置 --dls-layout-header-height 来指定布局头部的高度。

当吸底的布局底部和吸顶侧边栏一起使用需要在布局底部的父组件 Layout 上设置 --dls-layout-footer-height 来指定布局底部的高度。

在 GitHub 上编辑此页编辑

<template>
<article>
  <div class="mock-window">
    <veui-layout style="--dls-layout-header-height: 64px;">
      <veui-header sticky>Header</veui-header>
      <veui-layout>
        <veui-sidebar sticky style="max-height: 320px;">
          <div class="center full">Sidebar</div>
        </veui-sidebar>
        <veui-layout>
          <veui-content>
            <div class="center" style="height: 800px;">Sidebar</div>
          </veui-content>
          <veui-footer sticky style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
        </veui-layout>
      </veui-layout>
    </veui-layout>
  </div>
</article>
</template>

<script>
import { Layout, Header, Footer, Sidebar, Content } from 'veui'

export default {
  components: {
    'veui-layout': Layout,
    'veui-header': Header,
    'veui-footer': Footer,
    'veui-sidebar': Sidebar,
    'veui-content': Content
  },
  data () {
    return {
      mode: 'slim',
      modes: [
        { label: 'slim', value: 'slim' },
        { label: 'hidden', value: 'hidden' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.mock-window {
  height: 384px;
  transform: translate(0, 0); // bfc for fixed
  overflow: auto;
  border: 1px solid #eee;

  & > .veui-layout {
    min-width: 860px;
  }
}

.center,
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.full {
  height: 100%;
}
</style>

API

属性

名称	类型	默认值	描述
`direction`	`'column' \| 'row'`	`'column'`	布局排列方向。在有 `Sidebar` 时，默认为 `'row'`。

插槽

名称	描述
`default`	布局内容，可以是 `Header` / `Sidebar` / `Footer` / `Content` 组件或嵌套使用 `Layout` 组件。

在 GitHub 上编辑此页编辑