用vue3和ts写一个支持可输入、可全选的下拉框，多选的值在输入框中用英文逗号隔开

以下是一个使用 Vue3 和 TypeScript 编写的支持可输入、可全选的下拉框，多选的值在输入框中用英文逗号隔开的示例代码：

<template>
  <div class="dropdown">
    <input
      type="text"
      class="dropdown-input"
      placeholder="请选择或输入"
      v-model="inputValue"
      @focus="showDropdown = true"
      @blur="onInputBlur"
      @keydown.enter.prevent="onEnterKeydown"
      @keydown.down.prevent="onArrowDownKeydown"
      @keydown.up.prevent="onArrowUpKeydown"
    />
    <div
      class="dropdown-menu"
      v-show="showDropdown"
      @mousedown.prevent
      @mouseup.prevent
      @click="onMenuClick"
    >
      <div
        class="dropdown-item"
        v-for="(item, index) in filteredOptions"
        :key="index"
        :class="{ 'dropdown-item-selected': isSelected(item) }"
        @mouseenter="highlightIndex = index"
        @mouseleave="highlightIndex = -1"
        @mousedown="onItemMouseDown(item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'

export default defineComponent({
  name: 'Dropdown',
  props: {
    options: {
      type: Array,
      required: true,
    },
    value: {
      type: [String, Array],
      default: '',
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const inputValue = ref(props.value)
    const showDropdown = ref(false)
    const highlightIndex = ref(-1)

    const filteredOptions = computed(() => {
      const input = inputValue.value.trim().toLowerCase()
      return props.options.filter((option) =>
        option.toLowerCase().includes(input)
      )
    })

    const isSelected = (item: string) => {
      if (props.multiple) {
        return (props.value as string[]).includes(item)
      } else {
        return props.value === item
      }
    }

    const selectItem = (item: string) => {
      if (props.multiple) {
        const values = props.value as string[]
        if (values.includes(item)) {
          values.splice(values.indexOf(item), 1)
        } else {
          values.push(item)
        }
        emit('update:value', values)
      } else {
        emit('update:value', item)
        showDropdown.value = false
      }
    }

    const onInputBlur = () => {
      showDropdown.value = false
    }

    const onEnterKeydown = () => {
      if (highlightIndex.value >= 0) {
        selectItem(filteredOptions.value[highlightIndex.value])
      }
    }

    const onArrowDownKeydown = () => {
      if (highlightIndex.value < filteredOptions.value.length - 1) {
        highlightIndex.value++
      }
    }

    const onArrowUpKeydown = () => {
      if (highlightIndex.value > 0) {
        highlightIndex.value--
      }
    }

    const onMenuClick = () => {
      if (highlightIndex.value >= 0) {
        selectItem(filteredOptions.value[highlightIndex.value])
      }
    }

    const onItemMouseDown = (item: string) => {
      selectItem(item)
    }

    watch(
      () => props.value,
      (newValue) => {
        inputValue.value = newValue
      }
    )

    return {
      inputValue,
      showDropdown,
      highlightIndex,
      filteredOptions,
      isSelected,
      selectItem,
      onInputBlur,
      onEnterKeydown,
      onArrowDownKeydown,
      onArrowUpKeydown,
      onMenuClick,
      onItemMouseDown,
    }
  },
})
</script>

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

.dropdown-input {
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.dropdown-item {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-item-selected {
  color: #fff;
  background-color: #337ab7;
}

.dropdown-item-selected {
  font-weight: bold;
}

.dropdown-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.dropdown-item:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.dropdown-item:hover {
  color: #333;
  text-decoration: none;
  background-color: #f5f5f5;
}
</style>

使用方法：

<template>
  <div>
    <dropdown
      :options="['Apple', 'Banana', 'Cherry', 'Durian']"
      v-model="selectedFruits"
      :multiple="true"
    />
    <p>你选择了：{{ selectedFruits }}</p>
  </div>
</template>

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

export default defineComponent({
  name: 'App',
  components: {
    Dropdown,
  },
  setup() {
    const selectedFruits = ref<string[]>([])

    return {
      selectedFruits,
    }
  },
})
</script>