layout 布局

企业级中后台常见下面四种布局类型。

ha-layout 布局组件支持上述四种布局类型，通过 type 属性指定使用什么类型进行页面布局。

基本使用

type 属性支持四个值：

• lr: 左右布局
• tb: 上下布局
• tlr: 最外层上下布局，下侧分为左右布局
• ltb: 最外层左右布局，右侧再上下布局

左-右 lr上-下 tb上-左-右 tlr左-上-下 ltb

左侧区域

正文区域

<template>
  <div>
    <el-radio-group v-model="layoutType">
      <el-radio-button label="lr">左-右 lr</el-radio-button>
      <el-radio-button label="tb">上-下 tb</el-radio-button>
      <el-radio-button label="tlr">上-左-右 tlr</el-radio-button>
      <el-radio-button label="ltb">左-上-下 ltb</el-radio-button>
    </el-radio-group>

    <ha-layout style="height: 400px;" :type="layoutType">
      <template #top>顶部区域</template>
      <template #left>左侧区域</template>
      <template #main>正文区域</template>
    </ha-layout>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const layoutType = ref('lr')
</script>

<style scoped lang="scss">
.el-radio-group {
  margin-bottom: 20px;
}
:deep(.left) {
  background-color: #c1f0fa;
}
:deep(.right) {
  background-color: #e4dbff;
}
:deep(.top) {
  background-color: #e6ec9f;
}
:deep(.bottom) {
  background-color: #d1e7f8;
}
</style>

显示代码复制代码复制代码

该组件有三个插槽，分别对应 top， left, main。 其他属性见 Attributes 属性。

组件 API

Attributes 属性

参数	说明	类型	可选值	默认值
type	布局类型	String	lr - 左右布局 / tb - 上下布局 / tlr 上下布局（下侧分为左右布局） / ltb - 左右布局（右侧再上下布局）	lr
top-height	顶部高度	String	-	48px
left-width	左侧宽度	String	-	200px
left-width-mini	左侧收缩后宽度	String	-	80px
is-expand	左侧是否展开	Boolean	true / false	true
is-show-tab-bar	是否显示页签	Boolean	true / false	false
tab-list	页签列表	TabItem 数组	-	[]

TabItem 页面页签Tab

参数	说明	类型	可选值	默认值
path	路由路径	String	-	-
title	名称	String	-	-

Methods 方法

方法名	说明	参数	返回值

Events 事件

事件名	说明	参数	返回值

Slots 插槽

插槽名	说明	参数
top	顶部插槽（仅对type为tb, ltb, tlr类型生效）	无
left	左侧插槽（仅对 type 为 lr, ltb, tlr类型生效）	无
main	主体内容区域插槽，如果未设置改插槽，默认为 <router-view/>	无