寻北

Appearance

选择器 ​

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

基础用法 ​

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

<script setup>
import { ref } from 'vue'
const test = ref('1')
const options = [
  { label: 'option1', value: '1' },
  { label: 'option2', value: '2' },
  { label: 'option3', value: '3' },
  { label: 'option4', value: '4' }
]

</script>
<template>
  <vk-select v-model="test" placeholder="基础选择器，请选择" :options="options" />
</template>

禁用状态 ​

禁用整个选择器组件

为 el-select 设置 disabled属性，则整个选择器不可用。

<script setup>
import { ref } from 'vue'
const test = ref('1')
const options = [
  { label: 'option1', value: '1' },
  { label: 'option2', value: '2' },
  { label: 'option3', value: '3' },
  { label: 'option4', value: '4' }
]

</script>
<template>
  <vk-select v-model="test" placeholder="基础选择器，请选择" :options="options" disabled />
</template>

有禁用选项 ​

禁用选择器组件的单个选项,为options数组选项里面设置disabled属性，则该选项不可用

<script setup>
import { ref } from 'vue'
const test = ref('1')
const options = [
  { label: 'option1', value: '1' },
  { label: 'option2', value: '2' },
  { label: 'option3', value: '3' },
  { label: 'option4', value: '4',disabled: true },
]

</script>
<template>
  <vk-select v-model="test" placeholder="基础选择器，请选择" :options="options" />
</template>

可清空单选 ​

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

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

<script setup>
import { ref } from 'vue'
const test = ref('1')
const options = [
  { label: 'option1', value: '1' },
  { label: 'option2', value: '2' },
  { label: 'option3', value: '3' },
  { label: 'option4', value: '4' }
]
</script>
<template>
  <vk-select v-model="test" placeholder="可清空选择器，请选择" :options="options" clearable />
</template>

自定义模板 ​

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

<script setup>
import { ref, h } from 'vue'
const test = ref('')
const options = [
  { label: 'option1', value: '1' },
  { label: 'option2', value: '2' },
  { label: 'option3', value: '3' },
  { label: 'option4', value: '4' }
]
const customRender = (option) => {
  return h('div', { className: 'xyz' }, [h('b', option.label), h('span', option.value)])
}
</script>
<template>
  <vk-select
    v-model="test"
    placeholder="基础选择器，请选择"
    :options="options"
    :render-label="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'
const test = ref('')
const options = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
]
</script>
<template>
  <vk-select v-model="test" placeholder="可以过滤的选择器，请输入" :options="options" filterable clearable />
</template>

远程搜索 ​

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

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

<script setup>
import { ref } from '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>
  <vk-select
    v-model="test"
    placeholder="搜索远程结果"
    filterable
    remote
    clearable
    :remote-method="handleFetch"
  />
</template>

Select API ​

Select Attributes ​

属性名说明类型默认值
model-value / v-model绑定值'string'—
options选项的数据源,value,label 和 disabled属性.array—
placeholder占位符，默认为Selectstring—
clearable是否可以清空选项booleanfalse
disabled按钮是否为禁用状态booleanfalse
renderLabel自定义模板Function—
filterableSelect 组件是否可筛选booleanfalse
filterMethod自定义筛选方法的第一个参数是当前输入的值。 只有当 filterable 设置为 true 时才会生效。Function—
remote其中的选项是否从服务器远程加载booleanfalse
remoteMethod当输入值发生变化时触发的函数。 它的参数就是当前的输入值。 当filterable设置为 true 时才会生效Function—

Select Events ​

事件名说明类型
change选中值发生变化时触发Function
blur当 input失去焦点时触发Function
focus当 input 获得焦点时触发Function
input在 input 值改变时触发Function
clear可清空的单选模式下用户点击清空按钮时触发Function
visible-change下拉框出现/隐藏时触发Function

Option API ​

Option Attributes ​

属性名说明类型默认值
label选项的名称string—
value选项的值string—
disabled是否将选项置为禁用booleanfalse