vue3下拉菜单

在Vue3中，可以使用以下步骤来实现下拉菜单：

1. 创建一个下拉菜单组件 Dropdown.vue。

2. 在组件中使用 v-model 指令绑定一个 boolean 类型的变量来控制下拉菜单的显示与隐藏。

3. 在下拉菜单组件中定义一个与 trigger 相关的插槽（例如一个按钮），用于触发下拉菜单的显示与隐藏。

4. 定义一个与 content 相关的插槽（例如菜单项），用于渲染下拉菜单的内容。

以下是示例代码：

<template>
  <div class="dropdown">
    <div class="trigger" @click="isOpen = !isOpen">
      <slot name="trigger"></slot>
    </div>
    <div class="content" v-show="isOpen">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Dropdown",
    data() {
      return {
        isOpen: false,
      };
    },
  };
</script>

<style scoped>
  .dropdown {
    position: relative;
  }
  .content {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    display: none;
  }
  .content.show {
    display: block;
  }
</style>

在使用 Dropdown 组件时，可以使用以下代码：

<template>
  <div>
    <dropdown v-model="isOpen">
      <button slot="trigger">Toggle Dropdown</button>
      <ul slot="content">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </dropdown>
  </div>
</template>

<script>
  import Dropdown from "@/components/Dropdown.vue";
  export default {
    name: "App",
    components: {
      Dropdown,
    },
    data() {
      return {
        isOpen: false,
      };
    },
  };
</script>

在上面的代码中，我们首先导入了 Dropdown 组件，并在 Vue 实例中注册了该组件。然后，在模板中使用 Dropdown 组件，并使用 v-model 指令绑定 isOpen 变量，以控制下拉菜单的显示与隐藏。在 Dropdown 组件中，我们使用了两个插槽（trigger 和 content），分别用于触发下拉菜单的显示与隐藏以及渲染下拉菜单的内容。