Select 选择器

常用于主动操作后的反馈提示。

基础用法

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

<script setup>
import { ref } from 'vue'
import PfSelect from '@/components/lib/Select/src/Select.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>
  <pf-select
    v-model="test"
    placeholder="基础选择器，请选择"
    :options="options"
  />
</template>

可清空单选

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

<script setup>
import { ref } from 'vue'
import PfSelect from '@/components/lib/Select/src/Select.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>
  <pf-select
    v-model="test"
    placeholder="基础选择器，请选择"
    :options="options"
    clearable
  />
</template>

自定义模板

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

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

<style lang="css" scoped>
.pf-select__menu-item,
.xyz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
</style>

筛选选项

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

<script setup>
import { ref } from 'vue'
import PfSelect from '@/components/lib/Select/src/Select.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>
  <pf-select
    v-model="test"
    placeholder="基础选择器，请选择"
    :options="options"
    filterable
  />
</template>

远程搜索

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

<script setup>
import { ref } from 'vue'
import PfSelect from '@/components/lib/Select/src/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([])
    }
  })
}
</script>
<template>
  <pf-select
    v-model="test"
    placeholder="基础选择器，请选择"
    :options="options"
    clearable
    filterable
    remote
    :remote-method="remoteFilter"
  />
</template>

Select 属性

Name	Description	Type	Default
model-value / v-model	绑定值	'string | number'
options	下拉框选项	SelectOption[]	[]
disabled	是否禁用	boolean	false
placeholder	输入框占位文本	string	''
clearable	是否显示清除按钮	boolean	false
filterable	自定义筛选方法	boolean	false
filter-method	自定义筛选方法	(value: string | number) => SelectOption[]
remote	其中的选项是否从服务器远程加载	boolean	false
remote-method	自定义远程筛选方法	(value: string | number) => Promise<SelectOption[]>

SelectOption 属性

Name	Description	Type	Default
label	选项显示的文字	'string'
value	选项的值	string | number
disabled	是否禁用	boolean	false

Select 事件

Name	Description	Type
change	当选择器的输入框失去焦点时触发	(e: SelectOption) => void
visible-change	当下拉框显示或者隐藏时候触发	(e: boolean) => void
clear	在点击由 clearable 属性生成的清空按钮时触发	()=>void