elementui侧边栏的缩放_elementui侧边栏伸缩

我们使用 Element UI 提供的 el-aside 组件作为侧边栏，通过设置 collapsible 属性和监听 collapse 事件来实现侧边栏的展开和折叠功能。在 handleCollapse 方法中根据侧边栏的折叠状态来动态改变侧边栏的宽度。

<template>
  <div id="app">
    <el-container>
      <el-aside :width="sidebarWidth" :collapsed-width="collapsedWidth" collapsible @collapse="handleCollapse">
        Sidebar Content
      </el-aside>
      <el-main>
        Main Content
      </el-main>
    </el-container>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      sidebarWidth: '200px', // 初始侧边栏宽度
      collapsedWidth: '50px', // 缩起后的宽度
    };
  },
  methods: {
    handleCollapse(collapsed) {
      this.sidebarWidth = collapsed ? this.collapsedWidth : '200px'; // 根据折叠状态设置侧边栏宽度
    },
  },
};
</script>
 
<style>
/* 可以根据需要自定义样式 */
</style>