BIN-UI-DESIGN

Appearance

On this page

选择器 Select ​

基础用法 ​

基本用法。可以使用 v-model 双向绑定数据。

单选时，value 只接受字符串和数字类型，多选时，只接受数组类型，组件会自动根据 Option 的 value 来返回选中的数据。

可以给 Select 添加 style 样式，比如宽度。

<template>
  <div>
    <b-select v-model="select" style="width: 200px" clearable>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <span>{{ select }}</span>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>
<template>
  <div>
    <b-select v-model="select" style="width: 200px" clearable>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <span>{{ select }}</span>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>

禁用选项和禁用状态 ​

可以设置禁用状态和选项禁用

  
<template>
  <div>
    <b-select v-model="select" style="width: 200px" clearable>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      ></b-option>
    </b-select>
    &nbsp;
    <b-select v-model="select" style="width: 200px" disabled>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海', disabled: true },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>
<template>
  <div>
    <b-select v-model="select" style="width: 200px" clearable>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      ></b-option>
    </b-select>
    &nbsp;
    <b-select v-model="select" style="width: 200px" disabled>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海', disabled: true },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>

其他状态 ​

可以清空、分组或者自定义模板

<template>
  <div>
    <b-select v-model="select" style="width: 200px" clearable placeholder="可清空">
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>

    <b-select v-model="select" style="width: 200px; margin-left: 20px" placeholder="分组">
      <b-option-group label="直辖市">
        <b-option value="beijing" label="北京"></b-option>
        <b-option value="shanghai" label="上海"></b-option>
      </b-option-group>
      <b-option-group label="热门城市">
        <b-option value="xuzhou" label="徐州"></b-option>
        <b-option value="nanjing" label="南京"></b-option>
        <b-option value="suzhou" label="广州"></b-option>
        <b-option value="shenzhen" label="深圳"></b-option>
      </b-option-group>
    </b-select>

    <b-select v-model="select" style="width: 200px; margin-left: 20px" placeholder="自定义选项">
      <b-option value="beijing" label="北京">
        <span>北京</span>
        <span style="float: right; color: #ccc">beijing</span>
      </b-option>
      <b-option value="shanghai" label="上海">
        <span>上海</span>
        <span style="float: right; color: #ccc">shanghai</span>
      </b-option>
      <b-option value="xuzhou" label="徐州">
        <span>徐州</span>
        <span style="float: right; color: #ccc">xuzhou</span>
      </b-option>
    </b-select>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>
<template>
  <div>
    <b-select v-model="select" style="width: 200px" clearable placeholder="可清空">
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>

    <b-select v-model="select" style="width: 200px; margin-left: 20px" placeholder="分组">
      <b-option-group label="直辖市">
        <b-option value="beijing" label="北京"></b-option>
        <b-option value="shanghai" label="上海"></b-option>
      </b-option-group>
      <b-option-group label="热门城市">
        <b-option value="xuzhou" label="徐州"></b-option>
        <b-option value="nanjing" label="南京"></b-option>
        <b-option value="suzhou" label="广州"></b-option>
        <b-option value="shenzhen" label="深圳"></b-option>
      </b-option-group>
    </b-select>

    <b-select v-model="select" style="width: 200px; margin-left: 20px" placeholder="自定义选项">
      <b-option value="beijing" label="北京">
        <span>北京</span>
        <span style="float: right; color: #ccc">beijing</span>
      </b-option>
      <b-option value="shanghai" label="上海">
        <span>上海</span>
        <span style="float: right; color: #ccc">shanghai</span>
      </b-option>
      <b-option value="xuzhou" label="徐州">
        <span>徐州</span>
        <span style="float: right; color: #ccc">xuzhou</span>
      </b-option>
    </b-select>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>

搜索模式 ​

可以进行搜索查询

<template>
  <div>
    <b-select v-model="select" style="width: 200px" filterable>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <span>{{ select }}</span>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>
<template>
  <div>
    <b-select v-model="select" style="width: 200px" filterable>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <span>{{ select }}</span>
  </div>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>

多选和折叠 ​

可以进行多选

[]
<template>
  <div>
    <b-select v-model="select" style="width: 300px" multiple>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <b-select v-model="select" style="width: 300px; margin-left: 20px" multiple collapse-tags>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <span>{{ select }}</span>
  </div>
</template>

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

const select = ref([])
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>
<template>
  <div>
    <b-select v-model="select" style="width: 300px" multiple>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <b-select v-model="select" style="width: 300px; margin-left: 20px" multiple collapse-tags>
      <b-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></b-option>
    </b-select>
    <span>{{ select }}</span>
  </div>
</template>

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

const select = ref([])
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>

前缀模式 ​

可以设置下拉框前缀

<template>
  <div style="width: 200px">
    <b-select v-model="select">
      <template #prefix>
        <i class="b-iconfont b-icon-alert"></i>
      </template>
      <b-option value="beijing" label="北京"></b-option>
      <b-option value="shanghai" label="上海"></b-option>
      <b-option value="xuzhou" label="徐州"></b-option>
      <b-option value="nanjing" label="南京"></b-option>
    </b-select>
  </div>
</template>

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

const select = ref('')
</script>
<template>
  <div style="width: 200px">
    <b-select v-model="select">
      <template #prefix>
        <i class="b-iconfont b-icon-alert"></i>
      </template>
      <b-option value="beijing" label="北京"></b-option>
      <b-option value="shanghai" label="上海"></b-option>
      <b-option value="xuzhou" label="徐州"></b-option>
      <b-option value="nanjing" label="南京"></b-option>
    </b-select>
  </div>
</template>

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

const select = ref('')
</script>

创建新项 ​

可以允许创建列表中不存在的条目，使用allow-create可以输入并创建，此时filterable必需为true，

[]
<template>
  <b-row :gutter="20">
    <b-col :span="8">
      <b-select
        v-model="selected"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="请选择城市"
      >
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="16">
      <div style="height: 32px; line-height: 32px">{{ selected }}</div>
    </b-col>
  </b-row>
</template>

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

const selected = ref([])
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>
<template>
  <b-row :gutter="20">
    <b-col :span="8">
      <b-select
        v-model="selected"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="请选择城市"
      >
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="16">
      <div style="height: 32px; line-height: 32px">{{ selected }}</div>
    </b-col>
  </b-row>
</template>

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

const selected = ref([])
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>

不同大小 ​

四种默认大小

<template>
  <b-row :gutter="20">
    <b-col :span="6">
      <b-select v-model="select" clearable size="large">
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="6">
      <b-select v-model="select" clearable>
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="6">
      <b-select v-model="select" clearable size="small">
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="6">
      <b-select v-model="select" clearable size="mini">
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
  </b-row>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>
<template>
  <b-row :gutter="20">
    <b-col :span="6">
      <b-select v-model="select" clearable size="large">
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="6">
      <b-select v-model="select" clearable>
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="6">
      <b-select v-model="select" clearable size="small">
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
    <b-col :span="6">
      <b-select v-model="select" clearable size="mini">
        <b-option
          v-for="item in cityList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></b-option>
      </b-select>
    </b-col>
  </b-row>
</template>

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

const select = ref('')
const cityList = [
  { value: 'beijing', label: '北京' },
  { value: 'nanjing', label: '南京' },
  { value: 'shanghai', label: '上海' },
  { value: 'xuzhou', label: '徐州' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' }
]
</script>

Select props ​

参数说明类型可选值默认值
v-model指定选中项目的 modelValue 值，可以使用 v-model 双向绑定数据。String / Number / Boolean / Object—无
multiple多选Boolean—false
disabled是否禁用Boolean—false
clearable清空选项，只在单选时有效Boolean—false
filterable是否支持搜索Boolean—false
size选择框大小Stringlarge、small、default、minidefault
placeholder选择框默认文字String——
value-key作为 value 唯一标识的键名，绑定值为对象类型时必填string—value
no-match-text搜索条件无匹配时显示的文字，也可以使用#empty设置String—暂无匹配数据
no-data-tex选项为空时显示的文字String—暂无数据
allow-create是否允许创建没有的项，需配合 filterable 使用Boolean—false
filter-method自定义搜索方法Function——
remote是否启用远程搜索boolean—false
loading是否正在从远程获取数据boolean—false
loading-text远程加载文字boolean—加载中
placement弹窗的展开方向Stringtop、bottom、top-start、bottom-start、top-end、bottom-endbottom-start
append-to-body是否将弹层放置于 body 内Boolean—true
multiple-limit多选时最多允许选择几个Number——
collapse-tags多选时是否折叠标签Boolean—false
popper-class自定义弹出层类名String——
default-first-option在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用Boolean—false
clear-icon清空图标的类名String—close-circle-fill

Select events ​

事件名说明返回值
change选中的Option变化时触发，默认返回 value当前选中项
clear点击清空按钮时触发无
visible-change下拉框出现/隐藏时触发出现则为 true，隐藏则为 false
remove-tag多选模式下移除tag时触发移除的tag值
blur失去焦点触发(event: Event)
focus获取焦点触发(event: Event)

Select slot ​

名称说明
prefix自定义 Select 内头部图标
empty无选项时的列表

Option props ​

参数说明类型可选值默认值
value选项值，默认根据此属性值进行筛选，必填string/number—无
label选项显示的内容，默认会读取 slot，无 slot 时，优先读取该 label 值，无 label 时，读取 value。String——
disabled是否禁用当前项Boolean—false

OptionGroup props ​

参数说明类型可选值默认值
label分组组名String——
disabled该分组下所有选项置为禁用Boolean—false

MIT Licensed | Copyright © 2023-present bin-ui-design