vue3 ts 自定义 dropdown 组件

以下是一个简单的 Vue 3 TypeScript 自定义 Dropdown 组件的示例：

<template>
  <div class="dropdown-container" @click="toggleDropdown">
    <div class="selected-item">{{ selectedItem }}</div>
    <div v-show="isDropdownOpen" class="dropdown-menu">
      <div v-for="(item, index) in items" :key="index" @click="selectItem(item)">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "Dropdown",
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const selectedItem = ref(props.items[0]);
    const isDropdownOpen = ref(false);

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

    const selectItem = (item: string) => {
      selectedItem.value = item;
      isDropdownOpen.value = false;
    };

    return {
      selectedItem,
      isDropdownOpen,
      toggleDropdown,
      selectItem,
    };
  },
});
</script>

<style scoped>
.dropdown-container {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 0;
  z-index: 1;
  max-height: 200px;
  overflow-y: auto;
}
.selected-item {
  cursor: pointer;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

这个组件包含一个下拉菜单和一个当前选定的项目。当用户点击选定的项目时，下拉菜单将展开，并显示所有可用项目。用户可以从下拉菜单中选择一个项目，然后下拉菜单将关闭，并更新选定的项目。

在这个组件中，我们使用了 `ref` 来创建响应式的状态变量，并使用 `setup` 函数来组织组件逻辑。我们还使用了 `v-show` 指令来根据 `isDropdownOpen` 变量的值来控制下拉菜单的可见性。最后，我们使用了 `@click` 指令来监听用户的点击事件，并触发相应的方法。

你可以在父组件中使用这个自定义组件，例如：

<template>
  <div>
    <Dropdown :items="items" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Dropdown from "./Dropdown.vue";

export default defineComponent({
  name: "App",
  components: {
    Dropdown,
  },
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3"],
    };
  },
});
</script>

这里我们传递一个 `items` 数组给 Dropdown 组件，其中包含了下拉菜单中的所有可用选项。