vue2后台系统左菜单栏的折叠展开

在Vue2后台系统中，左菜单栏的折叠展开功能是指左侧导航菜单的可折叠和展开状态。这个功能通常用来优化界面显示，当导航菜单过长时，可以将其折叠起来，以节省页面空间，增强用户体验。

实现左菜单栏的折叠展开功能可以考虑以下步骤：

1. 在Vue组件中定义一个变量menuCollapsed来标记左菜单栏的折叠与展开状态，默认为false。
2. 在菜单栏的最外层div元素上绑定一个class，通过类名来控制菜单栏的宽度和显示方式。通过:class绑定判断menuCollapsed的值，来添加折叠和展开时的样式类。
3. 在菜单的折叠展开按钮上绑定一个点击事件，点击时改变menuCollapsed的值，实现菜单栏的折叠与展开。
4. 在菜单项的列表上根据menuCollapsed的值来决定是否显示菜单项的文字。

具体代码如下：

<template>
  <div class="menu-container" :class="{'collapsed': menuCollapsed}">
    <button class="collapse-button" @click="toggleMenu">
      {{ menuCollapsed ? '展开' : '折叠' }}
    </button>
    <ul class="menu-items">
      <li v-for="item in menuItems" :key="item.id" :class="{'hidden-text': menuCollapsed}">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuCollapsed: false,
      menuItems: [
        { id: 1, title: '菜单项1' },
        { id: 2, title: '菜单项2' },
        { id: 3, title: '菜单项3' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.menuCollapsed = !this.menuCollapsed;
    }
  }
}
</script>

<style>
.menu-container {
  width: 200px;
  transition: width 0.3s;
}

.collapsed {
  width: 50px;
}

.collapse-button {
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
}

.hidden-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

以上代码实现了一个简单的左菜单栏的折叠展开功能。通过点击```.collapse-button```按钮，可以切换菜单栏的折叠与展开状态。菜单项目在折叠状态下会隐藏文字，并且用省略号表示。