Pixelium Design

中文

English

中文

English

Appearance

Select ​

这是一个常见的选择器，使用下拉菜单展示并选择内容。

基础使用 ​

传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

Vue
Vue
<template>
	<px-space direction="vertical">
		<px-select v-model="value" :options="options" placeholder="Please Select"></px-select>
		<px-select :defaultValue="'vue'" :options="options" placeholder="Please Select"></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

禁用选项 ​

options 中，选项置 disabled 为 true 可禁用选项。

Vue
Vanilla
<template>
	<px-space direction="vertical">
		<px-select v-model="value" :options="options" placeholder="Please Select"></px-select>
		<px-select
			:defaultValue="'vanilla'"
			:options="options"
			placeholder="Please Select"
		></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('vue')
const options = [
	{ label: 'Vanilla', value: 'vanilla', disabled: true },
	{ label: 'Vue', value: 'vue' },
	{ label: 'React', value: 'react' },
	{ label: 'Angular', value: 'angular' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

分组 ​

options 中，也支持传入选项组。

Vue
<template>
	<px-space>
		<px-select v-model="value" :options="options" placeholder="Please Select"></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('vue')
const options = [
	{
		label: 'JS Framework',
		key: 'JS Framework',
		type: 'group',
		children: [
			{ label: 'Vanilla', value: 'vanilla', disabled: true },
			{ label: 'Vue', value: 'vue' },
			{ label: 'React', value: 'react' },
			{ label: 'Angular', value: 'angular' }
		]
	},
	{
		label: 'CSS Preprocessor',
		key: 'CSS Preprocessor',
		type: 'group',
		children: [
			{ label: 'Less', value: 'less' },
			{ label: 'Sass', value: 'sass' }
		]
	}
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

远程加载 ​

设置 loading 属性和监听 focus 事件，实现加载搜索时的 UI 变化。

Please Select
<template>
	<px-select
		v-model="value"
		:options="options"
		placeholder="Please Select"
		@focus="focusHandler"
		:loading="loading"
	></px-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(null)

const options = ref<string[]>([])
const loading = ref(false)

const list = ['Ready to work', 'Work, work', 'Work completed']

const focusHandler = () => {
	options.value = []
	loading.value = true
	setTimeout(() => {
		options.value = list
		loading.value = false
	}, 5000)
}
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

多选 ​

设置 multiple 属性开启多选模式。

Please Select
<template>
	<px-select
		v-model="value"
		:options="options"
		placeholder="Please Select"
		multiple
	></px-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<string[]>([])

const options = ref<string[]>(['Ready for action', 'Locked and loaded', 'I await your command'])
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

折叠标签 ​

多选时，设置 collapseTags 属性可开启折叠标签（默认为 false），maxDisplayTags 属性设置最大展示标签，collapseTagsPopover 设置折叠后是否通过弹出框展示被折叠的标签（默认为 true）。

Please select
Please select
<template>
	<px-space direction="vertical">
		<px-select
			placeholder="Please select"
			v-model="value"
			collapse-tags
			:max-display-tags="3"
			multiple
			:options="options"
		></px-select>
		<px-select
			placeholder="Please select"
			v-model="value"
			collapse-tags
			:max-display-tags="3"
			:collapse-tags-popover="false"
			multiple
			:options="options"
		></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<string[]>([])
const options = [
	{ label: 'Vue', value: 'vue' },
	{ label: 'React', value: 'react' },
	{ label: 'Angular', value: 'angular' },
	{ label: 'Svelte', value: 'svelte' },
	{ label: 'Preact', value: 'Preact' },
	{ label: 'Next', value: 'next' },
	{ label: 'Nuxt', value: 'nuxt' },
	{ label: 'Astro', value: 'astro' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

搜索选项 ​

设置 filterable 属性可开启搜索选项。

对于搜索的输入，传入 inputValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultInputValue 属性作为默认值。

inputValue:
Please select
Please select
<template>
	<px-space direction="vertical">
		<div>inputValue: {{ inputValue }}</div>
		<px-select
			placeholder="Please select"
			v-model="value"
			:options="options"
			v-model:input-value="inputValue"
			filterable
		></px-select>
		<px-select
			placeholder="Please select"
			v-model="multiValue"
			default-input-value="Nest"
			multiple
			:options="options"
			filterable
		></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const multiValue = ref<string[]>([])
const value = ref<string | null>(null)
const inputValue = ref<string>()
const options = [
	{ label: 'Express', value: 'express' },
	{ label: 'Koa', value: 'koa' },
	{ label: 'Nest', value: 'nest' },
	{ label: 'Fastify', value: 'fastify' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

添加选项 ​

设置 creatable 属性可添加选项，添加的选项类型为 string，注意要开启 filterable。

Please select
Please select
<template>
	<px-space direction="vertical">
		<px-select
			placeholder="Please select"
			v-model="value"
			:options="options"
			filterable
			creatable
		></px-select>
		<px-select
			placeholder="Please select"
			v-model="multiValue"
			multiple
			:options="options"
			filterable
			creatable
		></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const multiValue = ref<string[]>([])
const value = ref<string | null>(null)
const options = [
	{ label: 'Morning Mood', value: 'music1' },
	{ label: 'The Death of Åse', value: 'music2' },
	{ label: "Anitra's Dance", value: 'music3' },
	{ label: 'In the Hall of the Mountain King', value: 'music4' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

虚拟列表 ​

virtualScroll 属性开启虚拟列表，选项数据量大时可以开启提高性能。

Please Select
<template>
	<px-select
		v-model="value"
		:options="options"
		placeholder="Please Select"
		virtual-scroll
	></px-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(null)
const data = [
	'pear',
	'plum',
	'cherry',
	'blueberry',
	'raspberry',
	'blackberry',
	'lemon',
	'lime',
	'pomegranate',
	'apricot',
	'apple',
	'banana',
	'orange',
	'grape',
	'strawberry',
	'mango',
	'pineapple',
	'peach',
	'kiwi',
	'watermelon',
	'grapefruit',
	'tangerine',
	'mandarin',
	'nectarine',
	'fig',
	'date',
	'olive',
	'coconut',
	'avocado',
	'papaya',
	'guava',
	'passion fruit',
	'lychee',
	'longan',
	'dragon fruit',
	'durian',
	'rambutan',
	'star fruit',
	'persimmon',
	'cantaloupe',
	'honeydew',
	'mulberry',
	'gooseberry',
	'currant',
	'elderberry',
	'cranberry',
	'boysenberry',
	'loganberry',
	'cloudberry',
	'salmonberry',
	'lingonberry',
	'bilberry',
	'huckleberry',
	'acai berry',
	'goji berry',
	'maqui berry',
	'camu camu',
	'cupuacu',
	'mamey',
	'sapodilla',
	'soursop',
	'guanabana',
	'jackfruit',
	'pulasan',
	'mangosteen',
	'star apple',
	'rose apple',
	'wax apple',
	'java plum',
	'black plum',
	'white sapote',
	'black sapote',
	'marmalade plum',
	'pepino',
	'tamarillo',
	'cape gooseberry',
	'ground cherry',
	'physalis',
	'naranjilla',
	'lulo',
	'tomato',
	'potato',
	'carrot',
	'onion',
	'garlic',
	'cucumber',
	'bell pepper',
	'spinach',
	'lettuce',
	'broccoli',
	'cauliflower',
	'green bean',
	'pea',
	'zucchini',
	'eggplant',
	'celery',
	'asparagus',
	'brussels sprout',
	'kale',
	'chard',
	'radish',
	'turnip',
	'parsnip',
	'yam',
	'pumpkin',
	'squash',
	'artichoke',
	'leek',
	'shallot',
	'chive',
	'scallion',
	'beet',
	'swiss chard',
	'collard green',
	'mustard green',
	'dandelion green',
	'endive',
	'escarole',
	'fennel',
	'bok choy',
	'napa cabbage',
	'green cabbage',
	'red cabbage',
	'purple cabbage',
	'watercress',
	'mushroom',
	'okra',
	'sweet corn',
	'corn',
	'rhubarb',
	'kohlrabi',
	'rutabaga',
	'celtuce',
	'bamboo shoot',
	'heart of palm',
	'jerusalem artichoke',
	'sunchoke',
	'chayote',
	'pattypan squash',
	'butternut squash',
	'acorn squash',
	'spaghetti squash',
	'yellow squash',
	'crookneck squash',
	'aubergine',
	'cherry tomato',
	'plum tomato',
	'beefsteak tomato',
	'roma tomato',
	'grape tomato',
	'heirloom tomato',
	'red bell pepper',
	'green bell pepper',
	'yellow bell pepper',
	'orange bell pepper',
	'jalapeno',
	'habanero',
	'serrano',
	'cayenne pepper',
	'tabasco pepper',
	'poblano',
	'ancho',
	'chipotle',
	'fresno pepper',
	'banana pepper',
	'pepperoncini',
	'shishito pepper',
	'string bean',
	'snap bean',
	'haricot vert',
	'lima bean',
	'butter bean',
	'fava bean',
	'broad bean',
	'black bean',
	'kidney bean',
	'pinto bean',
	'navy bean',
	'cannellini bean',
	'great northern bean',
	'adzuki bean',
	'mung bean',
	'soybean',
	'lentil',
	'red lentil',
	'green lentil',
	'brown lentil',
	'black lentil',
	'chickpea',
	'garbanzo bean',
	'green pea',
	'snow pea',
	'sugar snap pea',
	'split pea',
	'black-eyed pea',
	'cowpea',
	'okra pod',
	'baby spinach',
	'flat-leaf spinach',
	'malabar spinach',
	'water spinach',
	'curly kale',
	'tuscan kale',
	'lacinato kale',
	'red kale',
	'kale rabe',
	'rapini',
	'collard greens',
	'mustard greens',
	'turnip greens',
	'dandelion greens',
	'rainbow chard',
	'beet greens',
	'spinach beet',
	'curly endive',
	'frisée',
	'radicchio',
	'arugula',
	'rocket',
	'land cress',
	'nasturtium',
	'sorrel',
	'iceberg lettuce',
	'romaine lettuce',
	'butterhead lettuce',
	'boston lettuce',
	'bibb lettuce',
	'leaf lettuce',
	'green leaf lettuce',
	'red leaf lettuce',
	'mixed greens',
	'mesclun',
	'microgreens',
	'alfalfa sprouts',
	'bean sprouts',
	'mung bean sprouts',
	'radish sprouts',
	'broccoli sprouts',
	'sunflower sprouts',
	'yellow onion',
	'red onion',
	'white onion',
	'sweet onion',
	'vidalia onion',
	'walla walla onion',
	'green onion',
	'garlic clove',
	' elephant garlic',
	'ramp',
	'wild leek',
	'garlic chive',
	'chives',
	'green asparagus',
	'white asparagus',
	'purple asparagus',
	'celery stalk',
	'celery root',
	'celeriac',
	'fennel bulb',
	'fennel frond',
	'orange carrot',
	'purple carrot',
	'yellow carrot',
	'white carrot',
	'baby carrot',
	'swede',
	'red radish',
	'daikon radish',
	'black radish',
	'watermelon radish',
	'horseradish',
	'wasabi',
	'red beet',
	'golden beet',
	'chioggia beet',
	'sugar beet',
	'orange sweet potato',
	'purple sweet potato',
	'white sweet potato',
	'true yam',
	'russet potato',
	'yukon gold potato',
	'red potato',
	'white potato',
	'fingerling potato',
	'sweet potato',
	'taro',
	'eddoe',
	'malanga',
	'yucca',
	'cassava',
	'manioc',
	'jicama',
	' Jerusalem artichoke',
	'ginger',
	'fresh ginger',
	'galangal',
	'turmeric',
	'fresh bamboo shoot',
	'canned bamboo shoot',
	'globe artichoke',
	'broccoli crown',
	'broccoli floret',
	'broccoli stem',
	'white cauliflower',
	'purple cauliflower',
	'green cauliflower',
	'romanesco broccoli',
	'baby brussels sprout',
	'cabbage',
	'savoy cabbage',
	'chinese cabbage',
	'pak choi',
	'baby bok choy',
	'tatsoi',
	'mizuna',
	'komatsuna',
	'white button mushroom',
	'cremini mushroom',
	'portobello mushroom',
	'shiitake mushroom',
	'oyster mushroom',
	'enoki mushroom',
	'beech mushroom',
	'shimeji mushroom',
	'maitake mushroom',
	'reishi mushroom',
	'cordyceps',
	'truffle',
	'black truffle',
	'white truffle',
	'morel',
	'chanterelle',
	'ceps',
	'porcini',
	'pie pumpkin',
	'sugar pumpkin',
	'jack-o-lantern pumpkin',
	'hubbard squash',
	'kabocha squash',
	'delicata squash',
	'summer squash',
	'winter squash',
	'mirliton',
	'tomatillo',
	'chinese eggplant',
	'Japanese eggplant',
	'white eggplant',
	'grape eggplant',
	'ladyfinger',
	'baby corn',
	'corn on the cob',
	'popcorn',
	'water chestnut',
	'lotus root',
	'elephant garlic',
	'Jerusalem artichoke',
	'starfruit',
	'carambola',
	'kiwifruit',
	'kiwi berry',
	'golden kiwi',
	'green kiwi',
	'fuyu persimmon',
	'hachiya persimmon',
	'medjool date',
	'deglet noor date',
	'black fig',
	'green fig',
	'mission fig',
	'kadota fig',
	'green olive',
	'black olive',
	'kalamata olive',
	'gaeta olive',
	'young coconut',
	'mature coconut',
	'coconut water',
	'coconut meat',
	'hass avocado',
	' fuerte avocado',
	'zutano avocado',
	'pinkerton avocado',
	'solo papaya',
	'maradol papaya',
	'strawberry guava',
	'common guava',
	'purple passion fruit',
	'yellow passion fruit',
	'litchi',
	'dragon eye',
	'red dragon fruit',
	'yellow dragon fruit',
	'caimito',
	'jambu',
	'jamun',
	'chocolate pudding fruit',
	'melon pear',
	'tree tomato',
	'uchuva',
	'aguaymanto',
	'breadfruit',
	'chempedak',
	'cempedak',
	'graviola',
	'custard apple',
	'cherimoya',
	'atemoya',
	'sweetsop',
	'annon',
	'mamey sapote',
	'chico',
	'naseberry',
	'sapote',
	'yellow sapote',
	'canistel',
	'eggfruit',
	'lucuma',
	'pawpaw',
	'asimina',
	'pommegranate',
	'quince',
	'loquat',
	'Japanese plum',
	'date plum',
	'sloe',
	'blackthorn',
	'serviceberry',
	'juneberry',
	'hawthorn berry',
	'rowan berry',
	'mountain ash',
	'black elderberry',
	'red elderberry',
	'aronia berry',
	'chokeberry',
	'highbush blueberry',
	'lowbush blueberry',
	'rabbiteye blueberry',
	'whortleberry',
	'black huckleberry',
	'blue huckleberry',
	'cowberry',
	'partridgeberry',
	'American cranberry',
	'European cranberry',
	'bearberry',
	'kinnikinnick',
	'garden strawberry',
	'alpine strawberry',
	'wild strawberry',
	'red raspberry',
	'black raspberry',
	'purple raspberry',
	'golden raspberry',
	'dewberry',
	'tayberry',
	'marionberry',
	'olallieberry',
	'youngberry',
	'bakeapple',
	'thimbleberry',
	'wineberry',
	'black mulberry',
	'red mulberry',
	'white mulberry',
	'green gooseberry',
	'red gooseberry',
	'golden gooseberry',
	'red currant',
	'black currant',
	'white currant',
	'pink currant',
	'wolfberry',
	'goji',
	'acai',
	'copuacu',
	'bacuri',
	'buriti',
	'pupunha',
	'jaca',
	'mangaba',
	'murici',
	'pitanga',
	'surinam cherry',
	'pitaya',
	'prickly pear',
	'cactus fruit',
	'tuna',
	'sabra',
	'green grape',
	'red grape',
	'purple grape',
	'black grape',
	'seedless grape',
	'concord grape',
	'thompson seedless',
	'crimson seedless',
	'muscat grape',
	'champagne grape',
	'raisin',
	'sultana',
	'dried currant',
	'dried apricot',
	'prune',
	'dried plum',
	'sweet cherry',
	'sour cherry',
	'tart cherry',
	'bing cherry',
	'rainier cherry',
	'cherry plum',
	'myrobalan',
	'bartlett pear',
	'bosc pear',
	'anjou pear',
	'comice pear',
	'seckel pear',
	'red apple',
	'green apple',
	'yellow apple',
	'honeycrisp apple',
	'fuji apple',
	'gala apple',
	'pink lady apple',
	'granny smith apple',
	'golden delicious apple',
	'red delicious apple',
	'mcintosh apple',
	'braeburn apple',
	'jazz apple',
	'envy apple',
	'cosmic crisp apple',
	'navel orange',
	'valencia orange',
	'blood orange',
	'clementine',
	'satsuma',
	'tangelo',
	'minneola',
	'ugli fruit',
	'white grapefruit',
	'pink grapefruit',
	'red grapefruit',
	'pomelo',
	'shaddock',
	'meyer lemon',
	'eureka lemon',
	'lisbon lemon',
	'key lime',
	'persian lime',
	'kaffir lime',
	'bergamot',
	'yuzu',
	'kumquat',
	'calamondin',
	'finger lime',
	'lemonade fruit',
	'rangpur',
	'mandarin lime',
	'smooth cayenne pineapple',
	'golden pineapple',
	'sugarloaf pineapple',
	'baby pineapple',
	'alphonso mango',
	'tommy atkins mango',
	'haden mango',
	'kent mango',
	'keitt mango',
	'ataulfo mango',
	'manila mango',
	'seedless watermelon',
	'yellow watermelon',
	'mini watermelon',
	'muskmelon',
	'charentais melon',
	'green honeydew',
	'orange honeydew',
	'crenshaw melon',
	'casaba melon',
	'canary melon',
	'galia melon',
	'melon',
	'winter melon',
	'wax gourd',
	'ash gourd',
	'bitter melon',
	'bitter gourd',
	' karela',
	'sponge gourd',
	'luffa',
	'ridge gourd',
	'snake gourd',
	'bottle gourd',
	'calabash'
]

const options = ref(data)
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

选项自定义渲染 ​

通过插槽自定义渲染选项。

Please input
<template>
	<px-select placeholder="Please input" v-model="input" :options="options">
		<template #group-label="{ option }">
			{{ option.label }}
			<div
				style="margin-left: 12px; color: red; font-size: 16px"
				v-if="option.label === 'citrus fruits'"
			>
				HOT!
			</div>
		</template>
		<template #option="{ option }">
			{{ option.label }}
			<px-tag style="margin-left: 12px" v-if="option.value === 'orange'">NEW!</px-tag>
		</template>
		<template #label="{ label, value }">
			{{ label }}
			<px-tag style="margin-left: 12px" v-if="value === 'orange'">NEW!</px-tag>
		</template>
	</px-select>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const input = ref<null | string>(null)

const options = ref([
	{
		type: 'group',
		label: 'citrus fruits',
		children: [
			{ label: 'orange', value: 'orange' },
			{ label: 'lemon', value: 'lemon' },
			{ label: 'lime', value: 'lime' },
			{ label: 'grapefruit', value: 'grapefruit' },
			{ label: 'tangerine', value: 'tangerine' }
		]
	},
	{
		type: 'group',
		label: 'tropical fruits',
		children: [
			{ label: 'mango', value: 'mango' },
			{ label: 'pineapple', value: 'pineapple' },
			{ label: 'papaya', value: 'papaya' },
			{ label: 'dragon fruit', value: 'dragon fruit' },
			{ label: 'durian', value: 'durian' },
			{ label: 'lychee', value: 'lychee' },
			{ label: 'longan', value: 'longan' }
		]
	}
])
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

更多配置 ​

选择器 Select 还拥有 Input、InputTag、AutoComplete 组件的部分功能。

Disabled, Readonly, Loading & Clearable

Please input
Please input
Please input
Please input

Shape

Please input
Please input

Size

Please input
Please input
Please input

Slot

prefix
Please input
suffix

Composite

Please input

Status

Please input
Please input
Please input
Please input

Expose

Please input

Tag Render

Please input
<template>
	<px-space direction="vertical">
		<h4>Disabled, Readonly, Loading & Clearable</h4>
		<px-space>
			<px-select placeholder="Please input" disabled :options="options"></px-select>
			<px-select placeholder="Please input" readonly :options="options"></px-select>
			<px-select placeholder="Please input" loading :options="options"></px-select>
			<px-select placeholder="Please input" clearable :options="options"></px-select>
		</px-space>
		<h4>Shape</h4>
		<px-space>
			<px-select placeholder="Please input" shape="round" :options="options"></px-select>
			<px-select placeholder="Please input" :options="options"></px-select>
		</px-space>
		<h4>Size</h4>
		<px-space>
			<px-select placeholder="Please input" size="small" :options="options"></px-select>
			<px-select placeholder="Please input" :options="options"></px-select>
			<px-select placeholder="Please input" size="large" :options="options"></px-select>
		</px-space>
		<h4>Slot</h4>
		<px-space>
			<px-select placeholder="Please input" :options="options">
				<template #prefix>prefix</template>
				<template #suffix>suffix</template>
			</px-select>
		</px-space>
		<h4>Composite</h4>
		<px-space>
			<px-input-group>
				<px-input-group-label>
					<IconBolt></IconBolt>
				</px-input-group-label>
				<px-select placeholder="Please input" :options="options"> </px-select>
				<px-button>Confirm</px-button>
			</px-input-group>
		</px-space>
		<h4>Status</h4>
		<px-space>
			<px-select placeholder="Please input" :options="options"> </px-select>
			<px-select placeholder="Please input" :options="options" status="success"> </px-select>
			<px-select placeholder="Please input" :options="options" status="warning"> </px-select>
			<px-select placeholder="Please input" :options="options" status="error"> </px-select>
		</px-space>
		<h4>Expose</h4>
		<px-space direction="vertical">
			<px-space>
				<px-button theme="info" @click="focusHandler">Focus & Blur after 5s</px-button>
				<px-button theme="warning" @click="clearHandler">Clear</px-button>
			</px-space>
			<px-select placeholder="Please input" :options="options" ref="selectRef"></px-select>
		</px-space>
		<h4>Tag Render</h4>
		<px-select placeholder="Please input" multiple :options="options">
			<template #tag="{ label }">
				<div style="display: flex; align-items: center">
					<IconBolt style="margin-right: 4px"></IconBolt> {{ label }}
				</div>
			</template>
		</px-select>
	</px-space>
</template>

<script setup lang="ts">
import { IconBolt } from '@pixelium/web-vue/icon-hn/es'
import { ref } from 'vue'
import { Select } from '@pixelium/web-vue'

// If on-demand import
// import { Select } from '@pixelium/web-vue/es'

const selectRef = ref<InstanceType<typeof Select> | null>(null)

const focusHandler = () => {
	setTimeout(() => {
		selectRef.value?.focus()
		setTimeout(() => {
			selectRef.value?.blur()
		}, 5000)
	}, 50)
}
const clearHandler = () => {
	selectRef.value?.clear()
}

const options = ref([
	{
		type: 'group',
		label: 'citrus fruits',
		children: [
			{ label: 'orange', value: 'orange' },
			{ label: 'lemon', value: 'lemon' },
			{ label: 'lime', value: 'lime' },
			{ label: 'grapefruit', value: 'grapefruit' },
			{ label: 'tangerine', value: 'tangerine' }
		]
	},
	{
		type: 'group',
		label: 'tropical fruits',
		children: [
			{ label: 'mango', value: 'mango' },
			{ label: 'pineapple', value: 'pineapple' },
			{ label: 'papaya', value: 'papaya' },
			{ label: 'dragon fruit', value: 'dragon fruit' },
			{ label: 'durian', value: 'durian' },
			{ label: 'lychee', value: 'lychee' },
			{ label: 'longan', value: 'longan' }
		]
	}
])
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>

API ​

SelectProps ​

属性类型可选默认值描述版本
modelValueany是选择器的值（受控模式），支持 v-model。0.0.2
defaultValueany是选择器的默认值（非受控模式）。0.0.2
optionsstring是选项列表。0.0.2
placeholderstring是占位符文本。0.0.2
disabledboolean是false是否禁用。0.0.2
readonlyboolean是false是否只读。0.0.2
clearableboolean是false是否显示清除按钮。0.0.2
multipleboolean是false0.0.2
loadingboolean是false是否显示加载状态。0.0.2
inputValuestring | null是搜索选项输入的文本值（受控模式），支持 v-model。0.0.2
defaultInputValuestring | null是搜索选项输入的默认文本值（非受控模式）。0.0.2
filterableboolean是false可否搜索选项。0.0.2
shouldShowPopover(value: string, optionsFiltered: (string | SelectOption | SelectGroupOption)[]) => boolean是是否展示弹出框的函数。0.0.2
filter(keyword: string, options: (string | SelectOption | SelectGroupOption)[]) => (string | SelectOption | SelectGroupOption)[]是筛选选项的函数。0.0.2
creatableboolean是false可否创建选项，需要开启 filterable。0.0.2
collapseTagsboolean是false是否开启折叠标签。0.0.2
maxDisplayTagsnumber是展示标签的最大数量，开启 collapseTags 后生效。0.0.2
collapseTagsPopoverboolean是true是否在弹出框中展示被折叠的标签，开启 collapseTags 后生效。0.0.2
virtualScrollboolean是false是否开启虚拟滚动。0.0.3
virtualListPropsOmit<VirtualListProps, 'list' | 'fixedHeight'>是虚拟列表属性。0.0.3
tagPropsOmit<TagProps, 'size' | 'disabled' | 'closable'> & EmitEvent<TagEvents>是标签的属性。0.0.3
size'medium' | 'large' | 'small'是'medium'选择器尺寸。0.0.2
shape'rect' | 'round'是'rect'选择器形状。0.0.3
borderRadiusNumberOrPercentage | NumberOrPercentage[]是圆角半径，优先级高于 shape，与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。0.0.2
status'success' | 'warning' | 'error' | 'normal'是'normal'表单验证状态。0.0.2
tagTheme'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'是'info'Deprecated 标签的 theme 属性，设置标签主题颜色。0.0.2
tagVariant'primary' | 'plain' | 'outline'是'plain'Deprecated 标签的 variant 属性，设置标签样式变体。0.0.2
tagColorstring是Deprecated 标签的 color 属性，自定义标签颜色。0.0.2
popoverPropsOmit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>是标签折叠时，弹出框 Popover 组件的属性。0.0.3
optionsDestroyOnHideboolean是false下拉选项是否会在隐藏时销毁。0.0.3

SelectEvents ​

事件参数描述版本
inputvalue: string, e: Event搜索选项输入时的回调。0.0.2
update:modelValuevalue: any更新 modelValue 的回调。0.0.2
update:inputValuevalue: string更新 inputValue 的回调。0.0.2
changevalue: any选择器内容变化时的回调。0.0.2
changevalue: string, e: Event | undefined选择器内容变化时的回调。0.0.2
clearvalue: any点击清除文本按钮，清除内容时的回调。0.0.2
blur失焦时的回调。0.0.2
focusevent: FocusEvent聚焦时的回调。0.0.2
selectvalue: any, e: MouseEvent选中选项的回调。0.0.2
tagClosevalue: any, e: MouseEvent关闭标签时的回调。0.0.2

SelectSlots ​

插槽参数描述版本
prefix前缀内容。0.0.2
suffix后缀内容。0.0.2
optionoption: string | SelectOption选项内容。0.0.2
group-labeloption: SelectGroupOption选项组的标签名。0.0.2
tagvalue: any, label: string, index: number, disabled: boolean, readonly: boolean标签内容。0.0.3
labelvalue: any, label: string, disabled: boolean, readonly: boolean已选择的内容。0.0.3

SelectExpose ​

属性类型可选默认值描述版本
focus() => void否聚焦当前控件。0.0.2
blur() => void否取消聚焦当前控件。0.0.2
clear() => void否清空当前输入内容。0.0.2

SelectOption, SelectGroupOption ​

ts
export interface Option<T = any> {
	value: T
	label: string
}

export interface GroupOption<T = any> {
	children: (Option<T> | string)[]
	type: typeof GROUP_OPTION_TYPE
}

export interface OptionListOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}

export interface OptionListGroupOption extends GroupOption {
	label: string
	key: string | number | symbol
	children: (OptionListOption | string)[]
}

export interface SelectOption extends OptionListOption<any> {
}

export interface SelectGroupOption extends OptionListGroupOption {
	children: (SelectOption | string)[]
}

EmitEvent ​

ts
export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}