在Vue3中构建响应式导航菜单

在现代Web开发中，响应式设计是不可或缺的一部分。随着移动设备的普及，确保网站在不同屏幕尺寸上都能良好显示变得尤为重要。在这篇博客中，我们将学习如何在Vue3中使用Composition API（setup语法糖）构建一个响应式的导航菜单。

Vue3和Composition API概述

首先，Vue3相较于Vue2引入了一些显著的变化，最重要的一点就是Composition API。这种新的API让我们可以通过函数的方式将逻辑分离，从而提高代码的可读性和复用性。今天，我们将利用Composition API来创建一个响应式的导航菜单。

设计思路

我们的导航菜单将包括以下功能：

1. 响应式布局：在大屏幕设备上显示所有菜单项；在小屏幕设备上，通过点击按钮显示或隐藏菜单项。
2. 动态切换：用户可以通过点击菜单来切换不同的页面视图。
3. 高亮选中项：当用户在不同的页面之间切换时，当前页面的菜单项高亮显示。

项目结构

我们将创建一个简单的Vue3项目，项目结构如下：

vue-responsive-menu/
│
├── src/
│   ├── components/
│   │   └── NavBar.vue
│   ├── App.vue
│   └── main.js
├── package.json
├── vite.config.js
└── index.html

步骤 1: 构建基础项目

首先，使用 Vue CLI 或 Vite 创建一个新的 Vue3 项目。如果你用 Vite，可以使用以下命令：

npm create vite@latest vue-responsive-menu -- --template vue
cd vue-responsive-menu
npm install

步骤 2: 创建导航组件

接下来，我们将在 src/components 目录下创建 NavBar.vue 组件，这将包含我们的导航菜单。

<template>
  <nav class="navbar">
    <div class="logo">MyApp</div>
    <button @click="toggleMenu" class="menu-button">
      {{ isMenuVisible ? 'Close' : 'Menu' }}
    </button>
    <ul v-if="isMenuVisible" class="menu">
      <li
        v-for="item in menuItems"
        :key="item.name"
        @click="changePage(item)"
        :class="{ active: currentPage === item.name }"
      >
        {{ item.name }}
      </li>
    </ul>
  </nav>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const menuItems = ref([
      { name: 'Home' },
      { name: 'About' },
      { name: 'Services' },
      { name: 'Contact' },
    ]);

    const currentPage = ref('Home');
    const isMenuVisible = ref(false);

    const toggleMenu = () => {
      isMenuVisible.value = !isMenuVisible.value;
    };

    const changePage = (item) => {
      currentPage.value = item.name;
      isMenuVisible.value = false; // Close menu after navigating
    };

    return {
      menuItems,
      currentPage,
      isMenuVisible,
      toggleMenu,
      changePage,
    };
  },
};
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem;
  color: white;
}

.menu-button {
  display: none;
}

.menu {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.active {
  font-weight: bold;
  border-bottom: 2px solid #fff;
}

/* 响应式设置 */
@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    position: absolute;
    background-color: #333;
    width: 100%;
    left: 0;
    top: 60px;
    display: none; /* 隐藏菜单默认状态 */
  }

  .menu-button {
    display: inline-block;
  }

  .menu[style*="display: block"] {
    display: block; /* 显示菜单 */
  }
}
</style>

在以上代码中，我们使用 ref 创建了响应式数据，来存储菜单项、当前页面和菜单的显示状态。我们使用了 v-if 指令在小屏幕上动态控制菜单的显示或隐藏。

步骤 3: 将导航组件整合到App中

接下来，在 src/App.vue 中引入我们的 NavBar 组件，并显示它：

<template>
  <div id="app">
    <NavBar />
    <div class="content">
      <h1>{{ currentPage }}</h1>
      <p>This is the {{ currentPage }} page content.</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import NavBar from './components/NavBar.vue';

export default {
  components: {
    NavBar,
  },
  setup() {
    const currentPage = ref('Home');

    return {
      currentPage,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.content {
  padding: 2rem;
}
</style>

在这个组件中，我们将 NavBar 船入并通过响应式的 currentPage 数据来显示当前页面的标题和内容。

步骤 4: 运行和测试

一切准备就绪后，可以使用以下命令启动开发服务器：

npm run dev

打开浏览器并访问 http://localhost:3000，你应该可以看到一个简单而响应式的导航菜单。尝试在较小的窗口中查看效果，点击按钮来显示或隐藏菜单。

总结

在本文中，我们使用 Vue3 的 Composition API 构建了一个简单的响应式导航菜单。通过利用 Vue 的响应式特性，我们能够轻松地处理不同屏幕尺寸下的显示效果和用户交互。这样的设计模式，不仅提升了用户体验，也为我们的代码带来了更好的组织结构。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作