Select 选择器

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

基础用法

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

1

<script setup>
import { ref } from 'vue'
import Select from '@/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 '@/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 '@/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 '@/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 '@/components/Select/Select.vue'
const test = ref('')
const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming',
]

const remoteFilter = (query) => {
  return new Promise((resolve) => {
    if (query) {
      setTimeout(() => {
        const options = states.filter((item) => {
          return item.toLowerCase().includes(query.toLowerCase())
        }).map(label => {
          return { label, value: label }
        })
        resolve(options)
      }, 500)
    } else {
      resolve([])
    }
  })
}
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