vue侧边栏点击小按钮展开隐藏

在Vue.js中，实现侧边栏的小按钮点击展开或隐藏功能，通常会涉及到组件的状态管理以及自定义事件或者指令。以下是一个简单的示例：

1. 首先，在组件模板上，创建一个可复用的小按钮元素，并绑定一个v-model属性来控制其显示状态。例如：

<template>
  <div class="sidebar">
    <button v-if="isExpanded" @click="toggleSidebar">收起</button>
    <button v-else>展开</button>
    <!-- 正文内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false, // 初始状态为隐藏
    };
  },
  methods: {
    toggleSidebar() {
      this.isExpanded = !this.isExpanded; // 点击时切换状态
    },
  },
};
</script>

2. `isExpanded` 数据属性用于存储侧边栏是否展开的信息，当用户点击“展开”按钮时，`toggleSidebar` 方法会被触发，更新这个状态。

3. 如果你希望在多个地方复用这个组件，可以考虑将状态管理放到父组件或者Vuex store中，然后通过props传递给子组件。