vue NavMenu侧边栏横向展示

Vue.js 中的 NavMenu（导航菜单）通常用于创建侧边栏，实现横向展示的方式可以使用 Vue 的组件化思想和一些 CSS 样式来构建。以下是一个简单的步骤说明：

1. **创建组件**:
首先，你可以创建一个名为 `SideNav` 或类似的组件，它包含一个 `v-for` 循环遍历菜单项。每个菜单项通常是一个对象，包含 `label` 和 `href` 属性。

<template>
  <ul class="side-nav">
    <li v-for="(item, index) in menuItems" :key="index">
      <a :href="item.href">{{ item.label }}</a>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    menuItems: { type: Array, required: true },
  },
};
</script>

<style scoped>
.side-nav {
  display: flex;
  list-style-type: none;
}
.side-nav a {
  padding: 10px;
  text-decoration: none;
}
</style>

2. **父组件调用**:
在父组件中，将菜单数据作为 prop 传递给 `SideNav` 组件，并添加到页面布局中。

<template>
  <div class="main-content">
    <SideNav :menuItems="sidebarItems" />
    <!-- 主内容区域 -->
  </div>
</template>

<script>
import SideNav from './components/SideNav.vue';

export default {
  components: {
    SideNav,
  },
  data() {
    return {
      sidebarItems: [
        // 侧边栏菜单项
      ],
    };
  },
};
</script>

3. **CSS 样式调整**:
为了让菜单横向展示，你可以调整 `.side-nav` 的样式，比如设置 `flex-direction` 为 `row` 或者使用媒体查询针对不同的屏幕尺寸调整布局。

.side-nav {
  flex-direction: row; /* 或根据屏幕宽度使用 @media 查询 */
  ...
}