# Vue item list selector

# 演示

# 支持多选与单选

# Props

# value/v-model

• type: Function
• default: []

组件绑定值，多选模式下需要为 Array 。

# optionsData

• type: Array/Promise/Function
• default: []

选项数据，子项为 object 类型时候，可配合 labelKey 与 valueKey 配置选项文本属性和要提交给 value 的属性。

为 Function 类型时，可直接 return 数据，或使用接受参数内的回调函数响应：

{
  optionsData: (done) => {
    const result = []
    // return result
    // or
    // some sync/async works
    done(result)
  }
}

# multiple

• type: Boolean
• default: true

是否多选模式。

# loadingText

• type: String
• default: 'Loading...'

如果 optionsData 为异步方式时，加载时的显示文本。

# notFoundText

• type: String
• default: 'No results'

未搜索到匹配数据时的显示文本。

# searchText

• type: String
• default: 'Search'

显示在搜索框的 Placeholder 。

# splitKeyword

• type: Boolean
• default: true

搜索时是否通过空格拆分进行多关键字匹配。

# matchTemplate

• type: Function
• default: t => `<mark>${t}</mark>`

搜索匹配时的文本格式化方法。

# labelKey

• type: String
• default: 'label'

若 optionsData 子项为 object 类型，通过该属性配置选项显示文本。若没有配置 optionTemplate 的话，其对应的结果还会作为搜索功能的搜索文本。

# valueKey

• type: String
• default: undefined

若 optionsData 子项为 object 类型，通过该属性配置要绑定给 value/v-model 的值。默认会提交整个对象，通过该属性也可实现默认值的绑定：

data() {
  return {
    value: 1
    optionsData: [
      { label: 'label-1', value: 1 },
      { label: 'label-2', value: 2 }
    ]
  }
}

# optionTemplate

• type: Function
• default: undefined
• params: (option)

选项文本格式化方法，该方法必须返回字符串，返回内容也会作为搜索功能的搜索文本。

若要自定义选项 html 内容，请使用 slot option-template 。

# filterMethod

• type: Function
• default: undefined
• params: (option, keyword)

自定义搜索方法，参数 option 为选项单项子项， keyword 为当前搜索关键字，返回 true 即表示命中。内部默认匹配方式为 @laomao800/mark-match。

# optionHeight

• type: Number
• default: 34

每个选项样式高度，用于虚拟滚动效果计算。

# optionsRemain

• type: Number
• default: 6

默认显示选项数量。

# optionsBench

• type: Number
• default: 6

虚拟滚动效果屏幕外选项数量。

# Events

# Methods

# Slots

# option-template