vue3侧边栏封装菜单栏

对于Vue 3的侧边栏封装菜单栏，你可以按照以下步骤进行：

步骤1：创建侧边栏组件
首先，创建一个名为SidebarMenu的Vue组件，在该组件中，可以定义侧边栏的样式、菜单项等。

<template>
  <div class="sidebar">
    <ul>
      <li v-for="item in menuItems" :key="item.id" @click="handleItemClick(item)">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, text: '菜单项1' },
        { id: 2, text: '菜单项2' },
        { id: 3, text: '菜单项3' }
      ]
    };
  },
  methods: {
    handleItemClick(item) {
      // 处理菜单项的点击事件
      console.log(item);
    }
  }
};
</script>

<style scoped>
.sidebar {
  background-color: #f0f0f0;
  width: 200px;
}

ul {
  list-style-type: none;
}

li {
  padding: 10px;
  cursor: pointer;
}

li:hover {
  background-color: #ddd;
}
</style>

步骤2：在主页面中使用侧边栏组件
在你的主页面中，使用SidebarMenu组件，并传入相应的菜单数据。

<template>
  <div>
    <sidebar-menu></sidebar-menu>
    <div class="content">
      <!-- 主要内容区域 -->
    </div>
  </div>
</template>

<script>
import SidebarMenu from '@/components/SidebarMenu.vue';

export default {
  components: {
    SidebarMenu
  }
};
</script>

<style>
.content {
  margin-left: 200px; /* 与侧边栏宽度保持一致 */
}
</style>

通过以上步骤，你就可以在Vue 3中封装一个简单的侧边栏菜单栏组件，并在主页面中使用它了。你可以根据需要，自定义样式、菜单项的数据以及处理菜单项点击事件的逻辑。希望以上信息对你有所帮助！