选择器 Select

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

基础用法

下拉选择器的基础用法。

请选择

<template>
  <bp-select v-model="val" 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-select>
</template>

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

const val = ref([]);
</script>

选择器尺寸

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

迷你小型普通大型

<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 允许选择器清空值。

<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>

Select 属性

v-model	绑定值	SelectValue	-	-
name	选择器名称	String	-	-
placeholder	占位文本	String	-	-
size	选择器尺寸	InputSize	default	-
disabled	是否禁用	Boolean	false	-
clearable	是否允许清空	Boolean	false	-

Option 属性

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

Select 事件

change	选项改变触发	val: SelectValue	-