Vue实现响应式导航菜单：桌面端导航栏 + 移动端抽屉式菜单

在现代Web开发中，为了提升用户体验，响应式设计已成为必备技能。本文将通过Vue.js，创建一个响应式导航菜单，桌面端显示顶部导航栏，移动端则切换为抽屉式菜单，并具备点击遮罩关闭的功能。以下是具体实现步骤。

项目需求分析

我们希望实现以下功能： 1. 桌面端宽屏（大于 768px）：顶部导航菜单，水平布局，导航栏固定在页面顶部。 2. 移动端窄屏（小于或等于 768px）：隐藏顶部导航栏，显示抽屉式菜单，点击遮罩层或关闭按钮可关闭抽屉。 3. 响应式设计：根据屏幕宽度自动切换布局，实时监听窗口大小变化。

实现步骤

1. 创建 Vue 项目并初始化布局

首先，初始化 Vue 项目。以下是 HTML 模板的基础结构，包含桌面端和移动端的两种菜单形式：

<template>
  <div id="app">
    <!-- 顶部导航栏（仅桌面端显示） -->
    <header>
      <nav class="top-nav" v-if="!isMobile">
        <ul class="menu-list">
          <li v-for="(item, index) in menuItems" :key="index">
            <a href="#">{
  
  { item.title }}</a>
          </li>
        </ul>
      </nav>

      <!-- 菜单按钮（仅移动端显示） -->
      <button v-if="isMobile" class="menu-button" @click="toggleDrawer">☰</button>
    </header>

    <!-- 抽屉式菜单 -->
    <div class="drawer" :class="{ open: isDrawerOpen }">
      <div class="drawer-header">
        <span class="logo">导航菜单</span>
        <button class="close-button" @click="toggleDrawer">×</button>
      </div>
      <ul class="menu-list">
        <li v-for="(item, index) in menuItems" :key="index">
          <a href="#">{
  
  { item.title }}</a>
        </li>
      </ul>
    </div>

    <!-- 抽屉遮罩层 -->
    <div v-if="isMobile && isDrawerOpen" class="overlay" @click="closeDrawer"></div>
  </div>
</template>

如果有二级菜单需要去做一些优化修改，使用css鼠标hover显示子级菜单或者通过js控制子级菜单展开折叠，以下是一个vue模版：

<template>
  <div id="app">
    <!-- 菜单按钮 -->
    <button class="menu-button" @click="toggleDrawer">☰</button>

    <!-- 抽屉菜单 -->
    <div class="drawer" :class="{ open: isDrawerOpen }"