vue 3 Dropdown 使用

Vue 3 的 Dropdown 组件可以通过 Vue CLI 或者直接引入 Vue 3 的脚本文件来使用。

首先，你需要安装 Vue 3 和 Dropdown 组件的依赖。你可以通过 npm 或者 yarn 来安装这些依赖。在你的项目目录下打开终端并输入以下命令来安装：

npm install vue@next
npm install @vueuse/core

或者

yarn add vue@next
yarn add @vueuse/core

安装完成后，你可以在你的 Vue 组件中引入 Dropdown 组件并使用它。首先，你需要在你的组件中导入相关的依赖：

import { ref } from 'vue';
import { useClickAway } from '@vueuse/core';

然后，你可以在你的模板中使用 Dropdown 组件：

<template>
  <div>
    <button @click="toggleDropdown">Toggle Dropdown</button>
    <div v-if="showDropdown" ref="dropdown" @click.away="closeDropdown">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </div>
</template>

然后，在你的组件内定义相关的方法和响应式数据：

export default {
  setup() {
    const showDropdown = ref(false);
    const dropdown = ref(null);

    const toggleDropdown = () => {
      showDropdown.value = !showDropdown.value;
    };

    const closeDropdown = () => {
      showDropdown.value = false;
    };

    useClickAway(dropdown, closeDropdown);

    return {
      showDropdown,
      dropdown,
      toggleDropdown,
      closeDropdown,
    };
  },
};

这样，你就可以在你的 Vue 3 项目中使用 Dropdown 组件了。你可以根据你的需求来自定义 Dropdown 的样式和行为。