Vue.js 中使用 Collapse 组件构建响应式侧边导航菜单

2023-12-18 21:33:09

打造响应式侧边导航菜单：Vue.js 中的 Collapse 组件

在现代 Web 开发中，响应式布局是不可或缺的，因为它能让网站在各种设备和屏幕尺寸上无缝显示和使用。侧边导航菜单是常见的 UI 元素，用于在网站一侧显示导航链接。当屏幕空间有限时，这些菜单可以收缩起来，为内容腾出更多空间。

Vue.js 作为流行的 JavaScript 框架，提供了一系列用于构建用户界面的组件。Collapse 组件是 Vue.js 中的一个内置组件，专用于创建可折叠的内容面板。本教程将详细介绍如何使用 Collapse 组件构建一个响应式侧边导航菜单。

安装和配置

创建 Vue.js 项目：

使用 Vue CLI 创建新项目：
```
vue create collapse-menu
```
安装依赖项：

安装 Collapse 组件：
```
npm install vue-collapse
```

创建 Vue 组件：

新建 Vue 组件 Sidebar.vue，包含侧边导航菜单：

<template>
  <div class="sidebar">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</template>

<script>
  import Collapse from 'vue-collapse'

  export default {
    components: {
      Collapse
    },
    data() {
      return {
        isCollapsed: true
      }
    }
  }
</script>

<style>
  /* 侧边导航菜单样式 */
</style>

使用 Collapse 组件：

在 Sidebar.vue 组件中，导入并注册 Collapse 组件，定义 isCollapsed 数据属性控制菜单收缩状态。模板中，将 Collapse 组件包裹在导航元素中，并使用 v-model 指令将 is-open 属性绑定到 isCollapsed 数据。
添加样式：

为侧边导航菜单添加样式，包括固定定位、导航链接和列表项样式。

使用 Sidebar 组件：

在主 Vue 组件中，导入 Sidebar 组件并作为子组件使用：

<template>
  <div>
    <sidebar></sidebar>
    <main>
      <!-- 主内容 -->
    </main>
  </div>
</template>

<script>
  import Sidebar from './Sidebar.vue'

  export default {
    components: {
      Sidebar
    }
  }
</script>