可伸缩式侧边栏 vue2

可伸缩式侧边栏是一种常见的UI组件，它可以在网页或应用程序中提供一个侧边栏，用户可以通过点击按钮或拖动手柄来展开或收起。在Vue2中，可以使用Vue组件和一些CSS样式来实现可伸缩式侧边栏。

以下是一个简单的实现可伸缩式侧边栏的Vue2组件的示例：

<template>
  <div class="sidebar-container">
    <div class="sidebar" :class="{ 'sidebar-expanded': isExpanded }">
      <!-- 侧边栏内容 -->
    </div>
    <button class="toggle-button" @click="toggleSidebar">
      <!-- 切换按钮 -->
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false, // 控制侧边栏展开与收起的状态
    };
  },
  methods: {
    toggleSidebar() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>

<style>
.sidebar-container {
  display: flex;
}

.sidebar {
  width: 200px; /* 侧边栏的宽度 */
  transition: width 0.3s ease; /* 添加过渡效果 */
}

.sidebar-expanded {
  width: 300px; /* 展开状态下的宽度 */
}

.toggle-button {
  /* 切换按钮的样式 */
}
</style>

在上述示例中，我们使用了一个`isExpanded`变量来控制侧边栏的展开与收起状态。点击切换按钮时，会调用`toggleSidebar`方法来改变`isExpanded`的值，从而实现侧边栏的展开与收起。