布局与结构类组件全面讲解
🎯 引言
掌握 Element UI 的布局与结构组件，你可以轻松搭建漂亮且实用的界面结构。无论是弹出层的对话框，还是侧边栏的抽屉，抑或是复杂嵌套的菜单导航，Element UI 都能帮你快速实现。本文将针对 Dialog、Drawer 和 Menu 三大常用组件，从基础用法到高级定制，详细讲解它们的使用逻辑和典型场景，助你快速上手。
🧱 对话框 Dialog
对话框是页面中常见的弹层组件，常用来提示用户信息、确认操作或者提交表单。Element UI 的 Dialog 组件既简单又灵活，支持多样的内容结构和交互方式。
🔑 打开 / 关闭逻辑
Dialog 的显示与隐藏通过一个绑定的布尔值控制，通常是变量 visible。
<template>
<el-button @click="dialogVisible = true">打开对话框</el-button>
<el-dialog :visible.sync="dialogVisible" title="示例对话框" @close="handleClose">
<p>这里是对话框内容</p>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
handleClose() {
console.log('对话框关闭了');
},
},
};
</script>
.sync 修饰符的 visible 属性，可以实现父组件和对话框的双向绑定，方便控制显示与隐藏。🧩 插槽内容 & Footer 操作按钮
Dialog 的内容默认是放在默认插槽中，底部操作按钮可以通过 footer 插槽自定义，灵活布局按钮和信息。
<template>
<el-dialog :visible.sync="dialogVisible" title="带自定义底部的对话框">
<p>这里是对话框的主体内容</p>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm">确认</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
submitForm() {
alert('提交成功');
this.dialogVisible = false;
},
},
};
</script>
#footer 插槽可以自定义对话框底部按钮，满足不同业务需求。🚪 抽屉 Drawer
抽屉是一个从页面边缘滑出的容器，常用于展示操作面板或侧边信息，交互体验好且不打断用户操作。
💡 侧边栏效果
抽屉默认从右侧滑出，也可以设置从左、上、下滑出。
<template>
<el-button @click="drawerVisible = true">打开抽屉</el-button>
<el-drawer :visible.sync="drawerVisible" title="示例抽屉" direction="ltr">
<p>这里是抽屉内容</p>
</el-drawer>
</template>
<script>
export default {
data() {
return {
drawerVisible: false,
};
},
};
</script>
📐 尺寸、方向、多层嵌套
size属性支持像素和百分比也可以用direction控制抽屉方向支持四个方向：ltrrtlttbbtt- 抽屉还支持嵌套，适合复杂的多层操作需求。
📚 菜单 Menu
菜单是导航的基础组件，负责引导用户浏览不同内容或页面。Element UI 的 Menu 组件支持多层级和路由联动，灵活满足各种导航需求。
🧭 左侧菜单和顶部菜单
Menu 支持两种模式：vertical（纵向，通常用于侧边栏）和 horizontal（横向，通常用于顶部导航），还可以设置 default-active 控制默认激活的菜单项。
<template>
<el-menu default-active="2" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">文档</el-menu-item>
<el-menu-item index="3">关于我们</el-menu-item>
</el-menu>
</template>
<script>
export default {
methods: {
handleSelect(index) {
alert(`选择了菜单项：${index}`);
},
},
};
</script>
🏗️ 嵌套子菜单、路由联动概念
多层菜单通过 el-submenu 实现，可以嵌套任意深度。结合 Vue Router（2.0）时，可通过监听菜单的 select 事件，执行路由跳转。
<template>
<el-menu default-active="1-1" class="el-menu-vertical" mode="vertical" @select="handleSelect">
<el-submenu index="1">
<template #title>产品中心</template>
<el-menu-item index="1-1">产品一</el-menu-item>
<el-menu-item index="1-2">产品二</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template #title>解决方案</template>
<el-menu-item index="2-1">方案一</el-menu-item>
<el-menu-item index="2-2">方案二</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
methods: {
handleSelect(url) {
this.$router.push(url);
},
},
};
</script>
index 唯一且匹配路由路径或标识，方便管理和联动。🧾 小节总结
- Element UI 的 Dialog 组件通过绑定
visible属性控制显隐，支持内容插槽和自定义底部按钮，灵活满足弹层需求。 - 抽屉 Drawer 提供多方向、多尺寸的边栏弹出效果，支持嵌套使用，适合复杂操作面板。
- 菜单 Menu 支持横向和纵向两种布局，拥有多层嵌套和路由联动能力，是构建导航的利器。
❓ 知识问答（Q&A）
Q：Dialog 组件如何实现点击关闭按钮时的事件监听？
A：可以通过监听 @close 事件，在关闭时执行相关逻辑，例如清空表单或者提示用户。
Q：Drawer 抽屉组件如何设置从左边滑出？
A：Drawer 的 direction 属性设置为 'ltr' 即可实现从左侧滑出。
Q：Menu 组件中如何实现点击菜单项后跳转路由？
A：监听 @select 事件，结合 Vue Router 的 this.$router.push() 实现路由跳转。
🧪 小练习
练习一
制作一个带有“确认”和“取消”按钮的 Dialog 弹框，点击“确认”弹出提示，点击“取消”关闭弹框。
模板代码：
<template>
<el-button @click="dialogVisible = true">打开对话框</el-button>
<el-dialog :visible.sync="dialogVisible" title="练习弹框">
<p>请确认您的操作</p>
<!-- 在这里编写你的代码 -->
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
confirm() {
// 补充代码，实现点击确认的提示功能
},
},
};
</script>
练习二
实现一个从左侧滑出的 Drawer，内部嵌套另一个从右侧滑出的 Drawer，分别设置大小和标题。
<template>
<el-button @click="firstDrawer = true">打开第一个抽屉</el-button>
<el-drawer title="左侧抽屉" :visible.sync="firstDrawer" size="40%" direction="ltr">
<el-button @click="secondDrawer = true">打开右侧抽屉</el-button>
<!-- 在这里编写第二个抽屉 -->
</el-drawer>
</template>
<script>
export default {
data() {
return {
firstDrawer: false,
secondDrawer: false,
};
},
};
</script>
🎉 恭喜你已经掌握 Element UI 中 Dialog、Drawer、Menu 三大布局与结构组件的使用和核心技能啦！快用它们构建你的项目界面吧！