选择器 Select

在表单场景中，用于从下拉列表中选择单个或多个选项。

单选与 label 属性

单选的基本用法，Option 支持通过 label 属性或插槽内容设置显示文本。

单选

当前值：

使用 label 属性

vue

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">单选</div>
      <bp-select v-model="val" placeholder="请选择" style="width: 240px">
        <bp-option value="beijing">北京</bp-option>
        <bp-option value="shanghai">上海</bp-option>
        <bp-option value="guangzhou">广州</bp-option>
        <bp-option value="shenzhen">深圳</bp-option>
      </bp-select>
      <div class="value">当前值：{{ val }}</div>
    </div>
    <div>
      <div class="label">使用 label 属性</div>
      <bp-select v-model="val2" placeholder="请选择" style="width: 240px">
        <bp-option :value="1" label="选项一" />
        <bp-option :value="2" label="选项二" />
        <bp-option :value="3" label="选项三" />
      </bp-select>
    </div>
  </div>
</template>

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

const val = ref("");
const val2 = ref<number | "">("");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
.value {
  font-size: 13px;
  color: #4e5969;
  margin-top: 8px;
}
</style>

多选

通过 multiple 属性开启多选，max-tag-count 控制最多显示的标签数量。

多选

选项 1

选项 3

最多显示 2 个标签

选项 1

选项 2

+2...

vue

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">多选</div>
      <bp-select v-model="val1" multiple placeholder="请选择" style="width: 240px">
        <bp-option :value="1">选项 1</bp-option>
        <bp-option :value="2">选项 2</bp-option>
        <bp-option :value="3">选项 3</bp-option>
        <bp-option :value="4">选项 4</bp-option>
        <bp-option :value="5">选项 5</bp-option>
      </bp-select>
    </div>
    <div>
      <div class="label">最多显示 2 个标签</div>
      <bp-select v-model="val2" multiple :max-tag-count="2" placeholder="请选择" style="width: 240px">
        <bp-option :value="1">选项 1</bp-option>
        <bp-option :value="2">选项 2</bp-option>
        <bp-option :value="3">选项 3</bp-option>
        <bp-option :value="4">选项 4</bp-option>
      </bp-select>
    </div>
  </div>
</template>

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

const val1 = ref([1, 3]);
const val2 = ref([1, 2, 3, 4]);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

选择器尺寸

通过 size 属性设置输入框的尺寸，支持 4 种尺寸，分别是 mini - 迷你，small - 小型，default - 普通（默认），large - 大型。

迷你小型普通大型

vue

<template>
  <bp-radio-group v-model="size" class="mb-5" type="button">
    <bp-radio value="mini">迷你</bp-radio>
    <bp-radio value="small">小型</bp-radio>
    <bp-radio value="default">普通</bp-radio>
    <bp-radio value="large">大型</bp-radio>
  </bp-radio-group>

  <bp-select v-model="val" :size placeholder="请选择" clearable style="width: 220px">
    <bp-option value="1">选项 1</bp-option>
    <bp-option value="2">选项 2</bp-option>
    <bp-option value="3">选项 3</bp-option>
    <bp-option value="4">选项 4</bp-option>
  </bp-select>
</template>

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

const size = ref("default");
const val = ref();
</script>

可清空值

通过设置 clearable 允许选择器清空值。

vue

<template>
  <bp-select v-model="val" placeholder="请选择" clearable style="width: 220px">
    <bp-option value="1">选项 1</bp-option>
    <bp-option value="2">选项 2</bp-option>
    <bp-option value="3">选项 3</bp-option>
    <bp-option value="4">选项 4</bp-option>
  </bp-select>
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref();
</script>

禁用

通过 disabled 属性禁用整个选择器，Option 上的 disabled 可禁用单个选项。

禁用选项

禁用整个选择器

vue

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">禁用选项</div>
      <bp-select v-model="val" placeholder="请选择" style="width: 240px">
        <bp-option value="a">选项 A</bp-option>
        <bp-option value="b" disabled>选项 B（禁用）</bp-option>
        <bp-option value="c">选项 C</bp-option>
        <bp-option value="d" disabled>选项 D（禁用）</bp-option>
      </bp-select>
    </div>
    <div>
      <div class="label">禁用整个选择器</div>
      <bp-select v-model="val2" disabled placeholder="请选择" style="width: 240px">
        <bp-option value="a">选项 A</bp-option>
        <bp-option value="b">选项 B</bp-option>
      </bp-select>
    </div>
  </div>
</template>

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

const val = ref("");
const val2 = ref("a");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Select 属性

v-model	绑定值	SelectValue	-	-
name	选择器名称	String	-	-
placeholder	占位文本	String	-	-
size	选择器尺寸	InputSize	default	-
disabled	是否禁用	Boolean	false	-
clearable	是否允许清空	Boolean	false	-
multiple	是否多选	Boolean	false	-
max-tag-count	最多显示标签数	Number	0	-

Option 属性

value	绑定值	SelectValue	-	-
label	显示文本	String	-	-
disabled	是否禁用	Boolean	false	-

Select 事件

change

选项改变触发

val: SelectValue

Select 方法

open	打开下拉	-	-	-
close	关闭下拉	-	-	-

Select 插槽

default

Option 列表

Option 插槽

default

选项内容

选择器 Select ​

单选与 label 属性 ​

多选 ​

选择器尺寸 ​

可清空值 ​

禁用 ​

Select 属性 ​

Option 属性 ​

Select 事件 ​

Select 方法 ​

Select 插槽 ​

Option 插槽 ​