Combobox

新粗野主义风格的可搜索选择组件。提供单选（Combobox）和多选（ComboboxMulti）两种模式。

预览

安装

pnpm dlx brutx@latest add combobox

单选模式

<script setup>
import { ref } from 'vue'
import Combobox from '@/components/ui/Combobox.vue'

const selected = ref(undefined)

const options = [
    { value: 'vue', label: 'Vue' },
    { value: 'react', label: 'React' },
    { value: 'angular', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
]
</script>

<template>
    <Combobox
        v-model="selected"
        :options="options"
        placeholder="Select a framework..."
        search-placeholder="Search frameworks..."
    />
</template>

多选模式

<script setup>
import { ref } from 'vue'
import ComboboxMulti from '@/components/ui/ComboboxMulti.vue'

const selected = ref([])

const options = [
    { value: 'vue', label: 'Vue' },
    { value: 'react', label: 'React' },
    { value: 'angular', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
]
</script>

<template>
    <ComboboxMulti
        v-model="selected"
        :options="options"
        placeholder="Select frameworks..."
        :max-display="3"
    />
</template>

ComboboxOption 类型

interface ComboboxOption {
    value: string
    label: string
    disabled?: boolean
}

Props

Combobox（单选）

属性	类型	默认值
options	ComboboxOption[]	—（必填）
modelValue	string | undefined	—
placeholder	string	'Select option...'
searchPlaceholder	string	'Search...'
emptyText	string	'No results found.'
disabled	boolean	false
class	string	—

ComboboxMulti（多选）

属性	类型	默认值
options	ComboboxOption[]	—（必填）
modelValue	string[]	[]
placeholder	string	'Select options...'
searchPlaceholder	string	'Search...'
emptyText	string	'No results found.'
disabled	boolean	false
maxDisplay	number	3
class	string	—

事件

Combobox

事件	载荷
update:modelValue	string | undefined

ComboboxMulti

事件	载荷
update:modelValue	string[]