element ui之NavMen 展开和折叠菜单

最新推荐文章于 2026-05-10 09:24:11 发布

原创最新推荐文章于 2026-05-10 09:24:11 发布 · 2.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ui #elementui #vue.js

收录于

本文介绍了如何在Vue.js应用中使用el-menu组件创建一个可折叠的侧边栏菜单。通过绑定布尔变量isCollapse来控制菜单的收缩和展开状态，并利用三元表达式设置侧边栏的宽度。同时，添加了一个按钮，当鼠标悬停时显示提示文字，点击按钮可以切换菜单的状态。点击事件方法`clickFold`用于切换isCollapse的值，实现菜单的交互效果。

el-menu标签加上collapse属性，绑定变量isCollapse(属性值为boolean类型)，通过变量控制收缩展开

<el-menu :collapse="isCollapse">

审查元素查看折叠后元素的宽度
再通过三元表达式和isCollapse控制宽度

 <el-aside :width="isCollapse?'60px':'150px'">

加个按钮控制展开折叠，为了提高用户体验可以在鼠标移上的时候加提示文字

<el-tooltip
            effect="dark"
            content="展开与折叠"
            placement="right"
          >
            <div class="fold" @click="clickFold">
              <i class="el-icon-d-arrow-left" v-show="!isCollapse"></i>
              <i class="el-icon-d-arrow-right" v-show="isCollapse"></i>
            </div>
          </el-tooltip>

 data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    //   展开和折叠菜单
    clickFold(){
        this.isCollapse = !this.isCollapse
    }}