Select 选择器

下拉选择器组件，用于从一组选项中选择一个值。

?

名称	分类	说明	类型	默认值
ghost	? 风格	幽灵样式，无边框和阴影	boolean	false
color	? 风格	选择器颜色，支持预设主题色或自定义十六进制色值	'primary' | 'success' | 'warning' | 'danger' | 'info' | string	—
size	? 尺寸	选择器尺寸	'large' | 'small'	—
disabled	? 状态	是否禁用	boolean	false
Optiondisabled	? 状态	是否禁用	boolean	false
clearable	? 行为	是否可清空	boolean	false
filterable	? 行为	是否可搜索	boolean	false
filter-method	? 行为	自定义筛选方法	(query: string) => SelectOptionProps[]	—
remote	? 行为	是否启用远程搜索	boolean	false
remote-method	? 行为	远程搜索方法	(query: string) => Promise<SelectOptionProps[]>	—
id	? 行为	输入框的原生 id 属性	string	—
model-value / v-model	? 内容	绑定值	string | number	—
options	? 内容	选项数组，与插槽方式二选一	SelectOptionProps[]	[]
placeholder	? 内容	占位符	string	'Select'
render-label	? 内容	自定义选项渲染函数	(option: SelectOptionProps) => VNode | string	—
Optionvalue	? 内容	选项值	string | number	—
Optionlabel	? 内容	选项标签	string	—
change	? 事件	选中值改变时触发	(value: string | number) => void	—
visible-change	? 事件	下拉框显示/隐藏时触发	(visible: boolean) => void	—
clear	? 事件	清空选中值时触发	() => void	—
focus	? 事件	获取焦点时触发	(event: FocusEvent) => void	—
blur	? 事件	失去焦点时触发	(event: FocusEvent) => void	—
focus	? 暴露	聚焦选择器	() => void	—
blur	? 暴露	失焦选择器	() => void	—

基础用法

使用 <px-option> 插槽子组件定义选项。

<template>
  <div class="demo-select">
    <px-select v-model="value" placeholder="请选择">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
      <px-option label="选项四" value="4" />
    </px-select>
  </div>
</template>

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

const value = ref('');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

禁用选项

在选项中使用 disabled 属性来禁用某个选项。

<template>
  <div class="demo-select">
    <px-select v-model="value" placeholder="有禁用选项">
      <px-option label="选项一" value="1" />
      <px-option label="选项二（禁用）" value="2" disabled />
      <px-option label="选项三" value="3" />
    </px-select>
  </div>
</template>

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

const value = ref('');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

禁用选择器

在选择器上设置 disabled 来禁用整个下拉菜单。

<template>
  <div class="demo-select">
    <px-select v-model="value" disabled placeholder="Disabled select">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
  </div>
</template>

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

const value = ref('1');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

可清空

设置 clearable 允许用户清除已选值。鼠标悬浮时显示清除图标。

<template>
  <div class="demo-select">
    <px-select v-model="value" clearable placeholder="Clearable select">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
  </div>
</template>

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

const value = ref('2');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

可搜索

设置 filterable 启用输入筛选选项。支持自定义 filter-method 和 remote-method 实现高级搜索。

<template>
  <div class="demo-select">
    <px-select v-model="value" filterable placeholder="Type to search">
      <px-option label="Apple" value="apple" />
      <px-option label="Banana" value="banana" />
      <px-option label="Cherry" value="cherry" />
      <px-option label="Grape" value="grape" />
      <px-option label="Orange" value="orange" />
    </px-select>
  </div>
</template>

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

const value = ref('');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

幽灵样式

设置 ghost 呈现无边框、透明的输入框，仅在悬浮或聚焦时显示边框 — 与 PxInput 幽灵样式一致。

<template>
  <div class="demo-select">
    <px-select v-model="value" ghost placeholder="Ghost select">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
  </div>
</template>

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

const value = ref('');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

选择器颜色

通过 color 设置预设主题色（primary、success、warning、danger、info），为输入框边框、选中指示器和高亮项着色。

<template>
  <div class="demo-select">
    <px-select v-model="v1" color="primary" placeholder="Primary" :options="options" />
    <px-select v-model="v2" color="success" placeholder="Success" :options="options" />
    <px-select v-model="v3" color="warning" placeholder="Warning" :options="options" />
    <px-select v-model="v4" color="danger" placeholder="Danger" :options="options" />
    <px-select v-model="v5" color="info" placeholder="Info" :options="options" />
  </div>
</template>

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

const options = [
  { value: '1', label: 'Option A' },
  { value: '2', label: 'Option B' },
  { value: '3', label: 'Option C' },
];

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
const v4 = ref('');
const v5 = ref('');
</script>

<style scoped>
.demo-select {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

自定义颜色

传入任意十六进制色值实现完全自定义主题，支持默认和 ghost 两种样式。

<template>
  <div class="demo-select">
    <h4>Default</h4>
    <px-select v-model="v1" color="#626aef" placeholder="Indigo #626aef" :options="options" />
    <px-select v-model="v2" color="#ff6b9d" placeholder="Pink #ff6b9d" :options="options" />
    <px-select v-model="v3" color="#36cfc9" placeholder="Teal #36cfc9" :options="options" />

    <h4>Ghost</h4>
    <px-select v-model="v4" color="#626aef" ghost placeholder="Indigo ghost" :options="options" />
    <px-select v-model="v5" color="#ff6b9d" ghost placeholder="Pink ghost" :options="options" />
    <px-select v-model="v6" color="#36cfc9" ghost placeholder="Teal ghost" :options="options" />
  </div>
</template>

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

const options = [
  { value: '1', label: 'Option A' },
  { value: '2', label: 'Option B' },
  { value: '3', label: 'Option C' },
];

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
const v4 = ref('');
const v5 = ref('');
const v6 = ref('');
</script>

<style scoped>
.demo-select {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
.demo-select h4 {
  margin: 8px 0 0;
}
</style>

不同尺寸

通过 size 控制选择器高度和菜单项尺寸。支持 large 和 small。

<template>
  <div class="demo-select">
    <px-select v-model="v1" size="large" placeholder="Large">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
    <px-select v-model="v2" placeholder="Default">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
    <px-select v-model="v3" size="small" placeholder="Small">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
  </div>
</template>

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

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
</script>

<style scoped>
.demo-select {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>