docs_vue2/one/docs/components/autocomplete.md
2020-09-22 11:06:13 +08:00

2.7 KiB
Raw Blame History

Autocomplete 自动完成

示例

API

属性

名称 类型 默认值 描述
datasource `Array<string Object>=` []
value * - [^prop-value]
match `function(string Object, string): boolean=` -
strict boolean= false 建议下拉面板关闭时,若输入值没有完全匹配建议值,那么会清空输入值。
suggest-trigger `string Array=` 'input'
placeholder string= 输入占位符。
select-on-focus boolean= false 聚焦时是否自动选中输入框文本。
composition boolean= false 是否感知输入法输入过程的值。
clearable boolean= false 是否显示清除按钮。
disabled boolean= false 是否为禁用状态。
readonly boolean= false 是否为只读状态。

^^^datasource 数据源数组,项目为 Object 时字段为 {label, value, children, ...}

+++字段详情

名称 类型 描述
label string 节点的文字描述。
value string 节点对应的值,一般是页内 hash#button
children Array<Object>= 节点的子节点数组,数组项类型同 items 数组项。
+++
^^^

^^^prop-value :::badges v-model :::

当前选中的值。 ^^^

插槽

名称 描述
suggestions [^scoped-slot-suggestions]
option-label [^scoped-slot-option-label]

^^^scoped-slot-suggestions

下拉建议面板插槽。

+++作用域参数

名称 类型 描述
datasource `Array<string Object>`
keyword string 搜索关键词。
+++
^^^

^^^scoped-slot-option-label

下拉面板中选项插槽。

+++作用域参数

名称 类型 描述
label string 用来显示的节点文案,不存在则取 value
value string 用来实际选中的值。
matches Array<{text: string, matched: boolean}> 匹配情况,一个节点可能被切分成多断文本,text 表示该段文本, matched 表示该段文本是否匹配。
+++
^^^

事件

名称 描述
input [^event-input]
suggest 采纳建议时触发,参数是当前值。
clear 清除当前值时触发。

^^^event-input :::badges v-model :::

当在 input 中输入或下拉面板中选值会触发该事件,参数是当前输入值或选中时的选中项目的 value。 ^^^