选择器 Select ​

在总多选项中，通过下拉选择一个或者一组数据。

基础用法 ​

基础的选择器用法

<template>
  <bp-select v-model="val" placeholder="Please select" clearable>
    <bp-option value="1">Option  1</bp-option>
    <bp-option value="2">Option  2</bp-option>
    <bp-option value="3">Option  3</bp-option>
    <bp-option value="4">Option  4</bp-option>
  </bp-select>
</template>

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

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

选项禁用 ​

通过控制选项的 disabled 属性以实现不可选择某一项

<template>
  <bp-select v-model="val" placeholder="Please select" clearable>
    <bp-option value="1">Option 1</bp-option>
    <bp-option value="2" disabled>Option 2</bp-option>
    <bp-option value="3">Option 3</bp-option>
    <bp-option value="4">Option 4</bp-option>
  </bp-select>
</template>

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

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

Select 属性 ​

v-model
选择器绑定值
StringNumber
-
disabled
是否禁用
Boolean
false
placeholder
占位提示文字
String
-
clearable
是否允许清空
Boolean
false

Option 属性 ​

value
选项的值
StringNumber
-
label
选项文本内容
String
-
disabled
是否禁用
Boolean
false

Select 事件 ​

change
选项值改变触发
value