让网站更美观：element 实现导航栏收起展开功能 |
您所在的位置：网站首页 › html收起展开 › 让网站更美观：element 实现导航栏收起展开功能 |
让网站更美观：element 实现导航栏收起展开功能
|
前言
在进行网站开发时，导航栏是一个非常重要的元素，它可以让用户更加方便地浏览和操作网站。而实现导航栏的收起展开功能，可以为用户提供更加灵活自由的选择。本文将介绍如何使用 Element UI 框架实现导航栏的收起展开功能，让你的网站更加符合用户的需求。 实现思路1. 首先给 el-menu 加上 :collapse="isCollapse" 属性，这个属性也是 element 上的一个参数，意思为是否开启折叠动画，在 data 中定义 isCollapse ，用 true 和 false 控制展开与收起。 2. 在 html 中写入以下代码。 3. 这里还需要把 el-aside 的宽度设置为跟 el-menu 一样，以免出现执行展开收起时宽度不一样。 4. 展开和收起按钮利用 isCollapse 的值动态改变，控制显示隐藏。 5. data 中定义的变量。 export default { name: "Main", data() { return { isCollapse: false, //默认为展开 }; }, };6. methods 中的点击事件。 methods: { // 动态控制展开与收起和切换对应图标 isC() { this.isCollapse = !this.isCollapse; }, },7. 用到的 css 代码。 .el-menu-vertical:not(.el-menu--collapse) { width: 240px; } 最后附上完整代码 工厂设置 export default { data() { return { isCollapse: false, //默认为展开 }; }, methods: { // 动态控制展开与收起和切换对应图标 isC() { this.isCollapse = !this.isCollapse; }, }, }; .el-header { background: #b3c0d1; color: #333; padding: 0 !important; } .el-aside { background: #393e42; color: #333; height: 100vh; } .el-menu { border-right-width: 0; } .el-main { color: #333; } .el-menu-vertical:not(.el-menu--collapse) { width: 240px; } .box_bgd { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .box_bgd i { font-size: 20px; } .box_bgd:hover { background: rgb(203, 215, 230); } 效果如下
|
【本文地址】
今日新闻 |
推荐新闻 |