vue sidebar 收缩

Vue sidebar收缩通常是指在基于Vue.js开发的应用中，侧边栏组件的一种交互设计，它允许用户点击或滑动某个按钮或区域来隐藏或显示侧边栏内容。这种效果通常通过CSS样式控制位置和宽度，配合JavaScript监听用户的操作（如click事件）来切换状态。在Vue中，可以使用v-show或v-if指令来条件渲染侧边栏，同时结合计算属性跟踪展开状态，并更新状态。

示例代码片段：

<template>
  <div class="sidebar">
    <button @click="toggleSidebar">展开/收起</button>
    <transition name="slide" v-if="showSidebar">
      <!-- 侧边栏内容 -->
      <div v-for="item in items">{{ item }}</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSidebar: true,
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  methods: {
    toggleSidebar() {
      this.showSidebar = !this.showSidebar;
    }
  }
};
</script>

<style scoped>
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter, .slide-leave-to {
  width: 0;
}
</style>