Nuxt3 实现的腾讯课堂下拉式多级菜单，丝滑灵动，操作简单

前端

2023-10-09 09:28:44

引言

在信息海洋中遨游时，人们往往需要在复杂的网页内容中寻找自己想要的信息。为了帮助用户在茫茫信息海中找到自己的方向，许多网站都设计了多级下拉菜单。

多级下拉菜单是一种互动式菜单，它可以将复杂的信息组织成层级结构，便于用户快速找到所需内容。用户只需单击或点击下拉菜单中的选项，即可查看更多详细信息或其他相关内容。

那么，我们该如何利用 Nuxt3 来仿照实现腾讯课堂的多级下拉菜单呢？

一、准备工作

在开始仿照之前，我们需要先做一些准备工作。

1. 创建 Nuxt3 项目

首先，我们需要创建一个 Nuxt3 项目。具体步骤如下：

npx npx create-nuxt-app <project-name>

2. 安装依赖

接下来，我们需要安装一些必要的依赖。

npm install vue-treeselect

3. 添加组件

然后，我们需要在项目中添加一个组件。

// components/Dropdown.vue
<template>
  <div class="dropdown">
    <div class="dropdown-header" @click="toggle">
      {{ title }}
      <i class="iconfont icon-arrow-down"></i>
    </div>
    <transition name="fade">
      <div class="dropdown-body" v-show="show">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Dropdown',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  setup() {
    const show = ref(false)

    const toggle = () => {
      show.value = !show.value
    }

    return {
      show,
      toggle
    }
  }
}
</script>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-header {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
}

.dropdown-body {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.dropdown-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.iconfont {
  font-family: "iconfont";
  font-size: 16px;
  vertical-align: middle;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease-in-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

4. 添加路由

然后，我们需要在项目中添加一个路由。

// routes/index.js
export default [
  {
    path: '/',
    name: 'home',
    component: () => import('~/pages/index.vue')
  }
]

5. 添加页面

最后，我们需要在项目中添加一个页面。

// pages/index.vue
<template>
  <div class="container">
    <dropdown title="一级菜单">
      <dropdown title="二级菜单">
        <dropdown title="三级菜单">
          <div class="dropdown-item">三级菜单项1</div>
          <div class="dropdown-item">三级菜单项2</div>
          <div class="dropdown-item">三级菜单项3</div>
        </dropdown>
      </dropdown>
    </dropdown>
  </div>
</template>

<script>
import Dropdown from '~/components/Dropdown.vue'

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

<style>
.container {
  padding: 20px;
}

.dropdown {
  margin-bottom: 20px;
}
</style>