Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

基础用法

适用广泛的基础单选 v-model 的值为当前被选中的 option 的 value 属性值。

1

<script setup>
import { ref } from 'vue'
import Select from '@/vue/components/Select/Select.vue'
const test = ref('1')
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
]
</script>
<template>
  <Select v-model="test" placeholder="基础选择器，请选择" :options="options2" />
  <span>{{test}}</span>
</template>

可清空单选

您可以使用清除图标来清除选择。

设置 clearable 属性，则可将选择器清空。

<script setup>
import { ref } from 'vue'
import Select from '@/vue/components/Select/Select.vue'
const test = ref('1')
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
]
</script>
<template>
  <Select v-model="test" placeholder="可清空选择器，请选择" :options="options2" clearable />
</template>

自定义模板

你可以自定义如何来渲染每一个选项, 使用 renderLabel 属性，它接受一个回调函数，返回 vNode 类型。

<script setup>
import { ref, h } from 'vue'
import Select from '@/vue/components/Select/Select.vue'
const test = ref('')
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
]
const customRender = (option) => {
  return h('div', { className: 'xyz' }, [h('b', option.label), h('span', option.value)])
}
</script>
<template>
  <Select v-model="test" placeholder="基础选择器，请选择" :options="options2" :renderLabel="customRender"/>
</template>
<style>
.vk-select__menu-item, .xyz  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
</style>

筛选选项

可以利用筛选功能快速查找选项。

添加 filterable 属性即可启用搜索功能。 默认情况下，Select 会找出所有 label 属性包含输入值的选项。 如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。

<script setup>
import { ref } from 'vue'
import Select from '@/vue/components/Select/Select.vue'

const test = ref('')
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
]
</script>

<template>
  <Select
    v-model="test"
    placeholder="可以过滤的选择器，请输入"
    :options="options2"
    filterable
  />
</template>

远程搜索

输入关键字以从远程服务器中查找数据。

服务器搜索数据，输入关键字进行查找。为了启用远程搜索，需要将 filterable 和 remote 设置为true，同时传入一个remote-method。 remote-method 为一个返回 Promise 的Function，类型为 (value: string) => Promise<SelectOption[]> 。

<script setup>
import { ref } from 'vue'
import Select from '@/vue/components/Select/Select.vue'
const test = ref('')

const handleFetch = (query) => {
  if (!query) return Promise.resolve([])
  return fetch(`https://api.github.com/search/repositories?q=${query}`)
  .then(res => res.json())
  .then(( { items }) => {
    return items.slice(0, 10).map(item => ({ label: item.name, value: item.node_id }))
  })
}
</script>
<template>
  <Select 
    v-model="test" 
    placeholder="搜索远程结果"
    filterable
    remote
    :remote-method="handleFetch"
  />
</template>

React 用法

import { useState } from 'react'
import { Select } from '@bobocn/element/react'
import type { SelectOption } from '@bobocn/element/react'
import '@bobocn/element/style.css'

const options: SelectOption[] = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3', disabled: true },
]

// 基础用法
function App() {
  const [value, setValue] = useState('')

  return (
    <Select
      modelValue={value}
      options={options}
      placeholder="请选择"
      onChange={setValue}
    />
  )
}

// 可清空
<Select modelValue={value} options={options} clearable onChange={setValue} />

// 可搜索
<Select modelValue={value} options={options} filterable onChange={setValue} />

// 远程搜索
<Select
  modelValue={value}
  options={[]}
  filterable
  remote
  remoteMethod={async (query) => {
    const res = await fetch(`/api/search?q=${query}`)
    return res.json()
  }}
  onChange={setValue}
/>

API

属性 (Attributes)

属性名	说明	类型	默认值
modelValue / v-model	绑定值	string	—
options	选项数据	SelectOption[]	[]
placeholder	占位文本	string	请选择
disabled	是否禁用	boolean	false
clearable	是否可以清空选项	boolean	false
renderLabel	自定义选项渲染函数	(option: SelectOption) => VNode	—
filterable	是否可搜索	boolean	false
filterMethod	自定义搜索方法	(value: string) => SelectOption[]	—
remote	是否为远程搜索	boolean	false
remoteMethod	远程搜索方法	(value: string) => Promise<SelectOption[]>	—

事件 (Events)

事件名	说明	回调参数
update:modelValue	选中值变化时触发	(value: string) => void
change	选中值变化时触发	(value: string) => void
visible-change	下拉菜单显示/隐藏时触发	(visible: boolean) => void
clear	点击清空按钮时触发	() => void