文章目录 基本布局常用属性常用事件
基本布局
上-中-下 布局
<a-layout> <a-layout-header>Header</a-layout-header> <a-layout-content>Content</a-layout-content> <a-layout-footer>Footer</a-layout-footer></a-layout>
上-左右-下 布局
<a-layout> <a-layout-header>Header</a-layout-header> <a-layout> <a-layout-sider>Sider</a-layout-sider> <a-layout-content>Content</a-layout-content> </a-layout> <a-layout-footer>Footer</a-layout-footer></a-layout>
左-上中下 布局
<a-layout> <a-layout-sider>Sider</a-layout-sider> <a-layout> <a-layout-header>Header</a-layout-header> <a-layout-content>Content</a-layout-content> <a-layout-footer>Footer</a-layout-footer> </a-layout></a-layout> 常用属性
Layout.Sider
属性说明默认breakpoint触发响应式布局的断点({ 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' })collapsed(v-model)当前收起状态collapsible是否可收起falsedefaultCollapsed是否默认收起falsetheme主题颜色light/darkdark常用事件 collapse 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发breakpoint 触发响应式布局断点时的回调
说明：
左边区域一般放置Menu菜单，若应用型网站菜单过多也可以在Header上再设置一个菜单；Layout.Sider支持响应式布局：配置 breakpoint属性即生效，视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth宽度，若将 collapsedWidth设置为零，会出现特殊 trigger；当内容较长时，使用固定侧边栏可以提供更好的体验：a-layout-sider设置为fixed定位；若想头部固定，可以设置a-layout-header为fixed定位
经典布局：
<a-layout id="components-layout-demo-top-side-2"> <a-layout-header class="header"> <div class="logo" /> <a-menu theme="dark" mode="horizontal" :default-selected-keys="['2']" :style="{ lineHeight: '64px' }" > <a-menu-item key="1">nav 1</a-menu-item> <a-menu-item key="2">nav 2</a-menu-item> <a-menu-item key="3">nav 3</a-menu-item> </a-menu> </a-layout-header> <a-layout> <a-layout-sider width="200" style="background: #fff"> <a-menu mode="inline" :default-selected-keys="['1']" :default-open-keys="['sub1']" :style="{ height: '100%', borderRight: 0 }" > <a-sub-menu key="sub1"> <span slot="title"><a-icon type="user" />subnav 1</span> <a-menu-item key="1">option1</a-menu-item> <a-menu-item key="2">option2</a-menu-item> <a-menu-item key="3">option3</a-menu-item> <a-menu-item key="4">option4</a-menu-item> </a-sub-menu> <a-sub-menu key="sub2"> <span slot="title"><a-icon type="laptop" />subnav 2</span> <a-menu-item key="5">option5</a-menu-item> <a-menu-item key="6">option6</a-menu-item> <a-menu-item key="7">option7</a-menu-item> <a-menu-item key="8">option8</a-menu-item> </a-sub-menu> </a-menu> </a-layout-sider> <a-layout style="padding: 0 24px 24px"> <a-breadcrumb style="margin: 16px 0"> <a-breadcrumb-item>Home</a-breadcrumb-item> <a-breadcrumb-item>List</a-breadcrumb-item> <a-breadcrumb-item>App</a-breadcrumb-item> </a-breadcrumb> <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }" > Content </a-layout-content> </a-layout> </a-layout></a-layout>