Skip to content
本页目录

Select 选择器

下拉选择器用于展示一组相关联的数据选项集合,用户可以从中选择内容。

代码示例

选择器尺寸(size)

使用 size 来定义选择器尺寸,支持 defaultsmallmini

查看代码
vue
<template>
  <div>
    <bf-select v-model="selVal1" placeholder="default" :options="selOptions">
    </bf-select>

    <bf-select
      v-model="selVal1"
      placeholder="small"
      :options="selOptions"
      size="small"
    ></bf-select>

    <bf-select
      v-model="selVal1"
      placeholder="mini"
      :options="selOptions"
      size="mini"
    ></bf-select>
  </div>
</template>

<script setup lang="ts">
import { BfSelect } from '@bf-teams/bfui-vue';

import { reactive, ref } from "vue";
const selVal1 = ref("");
const state = reactive({
  selOptions: [
    { label: "中国", value: "zhongguo" },
    { label: "俄罗斯", value: "eluosi" },
    { label: "美国", value: "meiguo" },
    { label: "澳大利亚", value: "aodaliya" },
    { label: "巴基斯坦", value: "bajisitan" },
  ],
});
const { selOptions } = state;
</script>

<style lang="less" scoped></style>

API

Select Props

属性 Attribute说明 Description类型 Type默认值 Default
size选择器尺寸Stringdefault
width选择器宽度String260px
height选择器高度String30px
options选择器Array[]
labelFiled默认需要显示的 label 字段Stringlabel
valueFiled默认需要显示的 value 字段Stringvalue
multiple是否多选Booleanfalse

根据MIT许可证发布