Vue 3 下拉菜单组件实现及解析

介绍

下拉菜单是一种常见的用户界面元素，在本文中，我们将使用 Vue 3 和 TypeScript 创建一个下拉菜单组件，并深入解析其实现细节。

我们将创建一个名为 DropdownMenu 的 Vue 3 组件，它将接受一组选项作为参数，并允许用户通过点击按钮来选择。

本文实现效果如下：

创建组件

首先，我们需要创建一个 Vue 组件。组件将包含一个按钮和一个下拉菜单。用户点击按钮时，下拉菜单将展开，显示所有可选项。点击选项后，下拉菜单将关闭，并更新按钮上显示的选项。

Dropdown.vue 文件

Template 部分

<template>
  <div ref="dropdownRef" class="dropdown">
    <!-- Dropdown button -->
    <button @click="toggleDropdown">
      {{ selectedOption }}
      <svg
        :class="isOpen ? 'down' : ''"
        aria-hidden="true"
        class="icon icon-caret"
        role="presentation"
        viewBox="0 0 10 6"
      >
        <path
          clip-rule="evenodd"
          d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z"
          fill="currentColor"
          fill-rule="evenodd"
        ></path>
      </svg>
    </button>
    <!-- Dropdown menu -->
    <ul v-if="isOpen" class="dropdown-menu">
      <li
        v-for="(option, index) in options"
        :key="index"
        @click="selectOption(option)"
      >
        {{ option }}
      </li>
    </ul>
  </div>
</template>复制

我们通过以上代码，分别创建了一个下拉菜单的按钮，和下拉菜单显示的列表

script部分

<script>
import { ref, onMounted, onUnmounted, nextTick } from "vue";
 
export default {
  name: "DropdownMenu",
  props: {
    options: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    // 响应变量
    const isOpen = ref(false); // Dropdown 开启/关闭状态
    const selectedOption = ref(props.options[0]); // 当前选中的选项
    const dropdownRef = ref(null); // 下拉元素的Ref
 
    // Toggle dropdown open/close state
    const toggleDropdown = () => {
      isOpen.value = !isOpen.value;
    };
 
    // 下拉切换打开/关闭状态
    const selectOption = (option) => {
      selectedOption.value = option; // 更新当前选中选项
      isOpen.value = false; // 关闭菜单
    };
 
    // 当点击外部时关闭下拉菜单
    const closeDropdown = (event) => {
      if (!dropdownRef.value.contains(event.target)) {
        isOpen.value = false;
      }
    };
 
	//生命周期钩子: 挂载
    onMounted(() => {
      nextTick(() => {
        document.addEventListener("click", closeDropdown); // 监听下拉框外的点击事件
      });
    });
 
	// 生命周期钩子: 卸载
    onUnmounted(() => {
      document.removeEventListener("click", closeDropdown); // 当组件被卸载时移除事件监听器
    });
 
    return {
      isOpen,
      selectedOption,
      toggleDropdown,
      selectOption,
      dropdownRef,
    };
  },
};
</script>复制

除了基本的操作之外，我们还在onMounted中对document绑定了一个closeDropdown点击事件，判断点击菜单之外的区域，视为关闭菜单。并且在组件unmounted时卸载该绑定事件

Style样式部分，注意我这里使用了SCSS

<style lang="scss" scoped>
.dropdown {
  position: relative;
  display: inline-block;
}
 
.dropdown button {
  background: none;
  color: inherit;
  padding: 0;
  border: none;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
}
 
.dropdown-menu {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 10px);
  background-color: #f9f9f9;
  min-width: 180px;
  max-height: 300px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}
 
.dropdown-menu li {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}
 
.dropdown-menu li:hover {
  background-color: #f1f1f1;
}
 
.icon-caret {
  color: #666;
  stroke: #666;
  height: 1.3rem;
  width: 1.3rem;
  margin-left: 0.3rem;
  stroke-width: 0.02rem;
  pointer-events: auto;
  transition: transform 0.2s ease-in-out; // 加入动画效果
 
  &.down {
    transform: rotate(180deg);
  }
}
</style>
 复制

通过上面的CSS代码，我们将Button的样式进行了plain化，调整了下拉角标的样式和增加了下拉状态动画，最后对下拉列表的样式进行了美化

组件解析

Template

在模板中，我们定义了一个包含按钮和下拉菜单的容器。按钮包含当前选定的选项以及一个下拉箭头图标。当用户点击按钮时，下拉菜单的显示状态会切换。下拉菜单中的每个选项都会遍历展示，并在用户点击时触发相应的选择操作。

Script

在脚本部分，我们使用 Vue 3 的 Composition API 来编写组件逻辑。我们定义了一些响应式变量，如下拉菜单的打开状态 (isOpen)、当前选定的选项 (selectedOption)，以及对下拉菜单 DOM 元素的引用 (dropdownRef)。

通过 setup 函数，我们设置了一些功能函数，包括打开/关闭下拉菜单、选择选项、以及在点击页面其他区域时关闭下拉菜单。我们还使用了 Vue 3 提供的生命周期钩子函数 onMounted 和 onUnmounted，分别用于在组件挂载和卸载时执行特定的操作。

当然, 你还可以基于这个组件，拓展其参数，让它更灵活使用 ~

总结

通过本文，我们了解了如何使用 Vue 3 和 TypeScript 创建一个简单而功能强大的下拉菜单组件。我们深入研究了组件的各个部分，包括模板、脚本和样式，并解释了它们的作用和实现细节。

这个下拉菜单组件可以作为 Vue 3 应用程序中的重要组成部分，用于提供用户友好的界面，并增强用户与应用程序的交互体验。通过理解组件的构建和实现过程，我们可以更好地利用 Vue 3 的特性和功能，为我们的应用程序添加更多功能和特性。

预览效果或查看完整代码