使用Vue实现一个简单的类手风琴效果的侧边导航栏

<template>
  <div class="sidebar-container" :style="{ width: sidebarWidth + 'px' }">
    <div class="sidebar-header" @click="toggleSidebar">
      <h3>侧边栏标题</h3>
      <div class="icon" :class="{ 'icon-close': !isSidebarOpen }">
        <!-- 使用合适的图标 -->
      </div>
    </div>
    <div class="sidebar-content" v-show="isSidebarOpen">
      <!-- 侧边栏内容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isSidebarOpen: true, // 控制侧边栏的开闭状态
      sidebarWidth: 200, // 侧边栏的宽度
    };
  },
  methods: {
    toggleSidebar() {
      this.isSidebarOpen = !this.isSidebarOpen;
    }
  }
};
</script>
 
<style scoped>
.sidebar-container {
  background-color: #f8f8f8;
  transition: width 0.3s; /* 添加过渡动画 */
}
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}
.sidebar-content {
  padding: 10px;
  overflow-y: auto; /* 使内容可滚动 */
}
.icon {
  /* 添加图标样式 */
}
.icon-close {
  /* 添加关闭时的图标样式 */
}
</style>

这个简单的Vue组件实现了一个可以通过点击标题栏来开关的侧边导航栏效果。点击标题后，侧边栏的开闭状态会切换，并且侧边栏的宽度会有过渡动画效果。这个例子展示了如何使用Vue的数据绑定和事件处理来创建交互式组件。