布局 Layout

基本用法

典型的页面布局。

App Bar 模式

Layout.Header 现在内置了标题、前后操作区、扩展区和头图层，适合直接承接页面 App Bar。

滚动行为

通过 scroll-behavior、scroll-target 和扩展区组合，可以实现和 App Bar 一样的折叠、隐藏与阴影切换效果。

响应式侧边栏

左侧 Slider 可以结合 Menu 设置为展开/收起状态, 设置breakpoint可触发响应式收缩。

自定义收起按钮

设置Menu.Sider 的hide-trigger属性为true后，Sider 内置的缩起按钮不会显示。此时可自定义收起按钮。

自定义按钮 Icon

通过设置 Menu.Sider 的 trigger 属性，实现自定义收起按钮的图标。

可伸缩侧边栏

可以用鼠标进行拖拽放大缩小的侧边栏，需要用到的参数：resizeDirections。

导航抽屉模式

Layout.Sider 现在支持临时抽屉、rail、浮动和左右停靠等导航抽屉能力，适合桌面端导航收纳与移动端临时菜单。

API

<layout> Props

参数名	描述	类型	默认值
has-sider	表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动	boolean	false

<layout-header> Props

参数名	描述	类型	默认值
title	标题内容	string	-
image	头图地址	string	-
model-value	当前是否显示	boolean	-
default-visible	默认是否显示	boolean	true
height	内容区域高度	number | string	64
density	密度	'default' | 'prominent' | 'comfortable' | 'compact'	'default'
extended	是否启用扩展区域	boolean	-
extension-height	扩展区域高度	number | string	48
collapse	是否强制折叠扩展区域	boolean	false
flat	是否移除阴影	boolean	false
floating	是否启用浮动态	boolean	false
fixed	是否固定在视口边缘	boolean	false
sticky	是否启用粘性定位	boolean	false
absolute	是否脱离文档流绝对定位	boolean	false
location	停靠位置	'top' | 'bottom'	'top'
scroll-behavior	滚动行为，可组合 hide、fully-hide、inverted、collapse、elevate、fade-image	string	-
scroll-target	滚动容器选择器，默认监听 window	string	-
scroll-threshold	触发滚动行为的阈值	number | string	300

<layout-header> Events

事件名	描述	参数
update:modelValue	显示状态变化时触发	visible: boolean

<layout-header> Slots

插槽名	描述	参数
image	头图层	-
prepend	左侧前置区域	-
title	标题区域	-
default	头部主内容	-
append	右侧操作区	-
extension	扩展区域	-

<layout-content> Slots

插槽名	描述	参数
default	内容	-

<layout-footer> Slots

插槽名	描述	参数
default	内容	-

<layout-sider> Props

参数名	描述	类型	默认值
theme	主题颜色	'dark' | 'light'	'light'
model-value	当前抽屉是否显示	boolean	-
default-visible	默认是否显示抽屉	boolean	false
collapsed	当前收起状态	boolean	-
default-collapsed	默认的收起状态	boolean	false
collapsible	是否可收起	boolean	false
rail	是否启用 rail 模式	boolean	-
default-rail	默认是否启用 rail 模式	boolean	false
rail-width	rail 模式下的宽度	number | string	56
expand-on-hover	是否在 hover 时临时展开 rail	boolean	false
disable-resize-watcher	是否禁用响应式宽度监听	boolean	false
disable-route-watcher	是否禁用路由切换时自动关闭临时抽屉	boolean	false
width	宽度	number	200
height	顶部或底部抽屉的高度	number | string	-
collapsed-width	收缩宽度	number	48
temporary	是否为临时抽屉模式	boolean	false
permanent	是否始终显示抽屉	boolean	false
persistent	临时抽屉模式下点击遮罩后是否保持显示	boolean	false
mask	是否显示遮罩层	boolean	true
mask-closable	点击遮罩层是否可以关闭抽屉	boolean	true
esc-to-close	是否支持通过 ESC 键关闭临时抽屉	boolean	true
location	抽屉停靠位置	'start' | 'end' | 'left' | 'right' | 'top' | 'bottom'	'start'
floating	是否启用浮动模式	boolean	false
sticky	是否启用粘性定位	boolean	false
reverse-arrow	翻转折叠提示箭头的方向，当 Sider 在右边时可以使用	boolean	false
breakpoint	触发响应式布局的断点, 详见响应式栅格	'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'	-
resize-directions	可以用 ResizeBox 替换原生的 aside 标签，这个参数即 ResizeBox的 directions 参数。详情请看 ResizeBox。	Array<'left' | 'right' | 'top' | 'bottom'>	-
hide-trigger	隐藏底部折叠触发器	boolean	false

<layout-sider> Events

事件名	描述	参数
update:modelValue	临时抽屉显示状态变化时触发	visible: boolean
update:rail	rail 状态变化时触发	rail: boolean
collapse	展开-收起时的事件，有点击 trigger 以及响应式反馈两种方式可以触发	collapsed: boolean type: 'clickTrigger'|'responsive'
breakpoint	触发响应式布局断点时的事件	collapsed: boolean

<layout-sider> Slots

插槽名	描述	参数
image	顶部媒体区域	-
prepend	内容前置区域	-
append	内容后置区域	-
trigger	自定义底部折叠触发器	collapsed: boolean