以下是一个用 Vue3 和 TypeScript 编写的支持可
输入、可全选的
下拉框，多选的值在
输入框中用英文逗号隔开的示例代码：
```html
<template>
<div class="
select-wrapper">
<input type="text" v-model="inputValue" @input="handleInput" @keydown.enter="handleEnter" @keydown.tab="handleTab" @keydown.esc="handleEsc" @keydown.down="handleDown" @keydown.up="handleUp" />
<ul class="options" v-show="isOpen">
<li v-for="(option, index) in filteredOptions" :key="index" :class="{ active: index === activeIndex }" @mousedown="handleMouseDown(index)">
{{ option }}
</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
export default defineComponent({
name: '
Select',
props: {
options: {
type: Array,
required: true,
},
value: {
type: [String, Array],
default: '',
},
multiple: {
type: Boolean,
default: false,
},
},
setup(props, { emit }) {
const inputValue = ref<string>(props.value as string)
const isOpen = ref<boolean>(false)
const activeIndex = ref<number>(-1)
const filteredOptions = computed(() => {
return props.options.filter((option) => {
return option.toLowerCase().includes(inputValue.value.toLowerCase())
})
})
const handleInput = (event: InputEvent) => {
const target = event.target as HTMLInputElement
inputValue.value = target.value
activeIndex.value = -1
}
const handleEnter = () => {
if (activeIndex.value !== -1) {
handle
Select(filteredOptions.value[activeIndex.value])
}
}
const handleTab = () => {
if (activeIndex.value !== -1) {
handle
Select(filteredOptions.value[activeIndex.value])
} else {
isOpen.value = false
}
}
const handleEsc = () => {
isOpen.value = false
}
const handleDown = () => {
if (activeIndex.value < filteredOptions.value.length - 1) {
activeIndex.value++
}
}
const handleUp = () => {
if (activeIndex.value > -1) {
activeIndex.value--
}
}
const handle
Select = (option: string) => {
if (props.multiple) {
const values = (props.value as string).split(',')
if (values.includes(option)) {
values.splice(values.indexOf(option), 1)
} else {
values.push(option)
}
inputValue.value = values.join(',')
} else {
inputValue.value = option
isOpen.value = false
}
emit('update:value', inputValue.value)
}
const handleMouseDown = (index: number) => {
handle
Select(filteredOptions.value[index])
}
watch(
() => props.value,
(newValue) => {
inputValue.value = newValue as string
}
)
return {
inputValue,
isOpen,
activeIndex,
filteredOptions,
handleInput,
handleEnter,
handleTab,
handleEsc,
handleDown,
handleUp,
handle
Select,
handleMouseDown,
}
},
})
</script>
<style scoped>
.
select-wrapper {
position: relative;
}
.options {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
list-style: none;
padding: 0;
margin: 0;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
max-height: 200px;
overflow-y: auto;
}
.options li {
padding: 5px;
cursor: pointer;
}
.options li.active {
background-color: #f2f2f2;
}
input[type='text'] {
width: 100%;
box-sizing: border-box;
padding: 5px;
border: 1px solid #ccc;
}
</style>
```
使用方法：
```html
<template>
<div>
<
select v-model="
selectedOptions" multiple>
<option v-for="option in options" :value="option">{{ option }}</option>
</
select>
<
select v-model="
selectedOption">
<option v-for="option in options" :value="option">{{ option }}</option>
</
select>
<
Select :options="options" v-model="
selectedOptions" multiple />
<
Select :options="options" v-model="
selectedOption" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import
Select from './
Select.vue'
export default defineComponent({
name: 'App',
components: {
Select,
},
setup() {
const options = ref<string[]>(['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'])
const
selectedOptions = ref<string[]>([])
const
selectedOption = ref<string>('')
return {
options,
selectedOptions,
selectedOption,
}
},
})
</script>
```
在这个示例中，我们使用了 Vue3 的 Composition API，定义了一个名为 `
Select` 的组件，它接受 `options`、`value` 和 `multiple` 三个 props，分别表示
下拉框的选项、选中的值和是否支持多选。组件内部使用了 `ref`、`computed` 和 `watch` 等响应
式 API，
实现了
下拉框的各种交互逻辑。在使用时，我们可以像使用普通的 `
select` 元素一样使用 `
Select` 组件，并通过 `v-model` 双向绑定选中的值。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
