vue3前端后台管理系统如何实现点击图标控制菜单栏的缩放

实现方式：

在模板中定义菜单栏和图标，并为图标添加点击事件。

<template>
  <div>
    <div class="menu" :class="{ 'menu-collapse': isCollapse }">
      <ul>
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
      </ul>
    </div>
    <div class="icon" @click="toggleMenu">
      <i class="fa fa-bars"></i>
    </div>
  </div>
</template>

在脚本中定义 isCollapse 变量来控制菜单栏的展开和收缩状态，以及 toggleMenu 方法来切换菜单栏的状态。

<script>
export default {
  data() {
    return {
      isCollapse: false
    }
  },
  methods: {
    toggleMenu() {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

在样式中定义菜单栏的展开和收缩状态，以及图标的样式。

<style>
.menu {
  width: 200px;
  height: 100%;
  background-color: #f5f5f5;
  transition: width 0.5s ease-in-out;
}
.menu-collapse {
  width: 50px;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding: 10px;
}
.icon {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
}
.fa-bars {
  font-size: 24px;
}
</style>

这样，点击图标时就可以切换菜单栏的展开和收缩状态了