Baidu DLS

返回 DLS

Autocomplete 自动完成

示例

suggest on input

请输入

suggest on focus

请输入
<template>
<article class="autocomplete-normal-demo">
  <section>
    <h3>suggest on input</h3>
    <veui-autocomplete
      :datasource="suggestions"
      placeholder="请输入"
      clearable
    />
  </section>
  <section>
    <h3>suggest on focus</h3>
    <veui-autocomplete
      :datasource="coffees"
      placeholder="请输入"
      suggest-trigger="focus"
    />
  </section>
</article>
</template>

<script>
import { Autocomplete } from 'veui'

export default {
  components: {
    'veui-autocomplete': Autocomplete
  },
  data () {
    return {
      suggestions: [
        {
          value: 'Moka'
        },
        {
          value: 'Turkish'
        },
        {
          value: 'latte'
        },
        {
          value: 'cappuccino'
        }
      ],
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          options: [
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          options: [
            {
              label: 'Espresso Romano',
              value: 'espresso-romano'
            },
            {
              label: 'Guillermo',
              value: 'guillermo'
            },
            {
              label: 'Ristretto',
              value: 'ristretto'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          options: [
            {
              label: 'Latte',
              value: 'latte'
            },
            {
              label: 'Macchiato',
              value: 'macchiato'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino'
            },
            {
              label: 'White coffee',
              value: 'white-coffee'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.autocomplete-normal-demo {
  display: flex;
  section + section {
    margin-left: 60px;
  }
}
</style>

API

属性

名称类型默认值描述
datasourceArray<string|Object>=[]

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

名称类型描述
labelstring节点的文字描述。
valuestring节点对应的值,一般是页内 hash, 如 #button
childrenArray<Object>=节点的子节点数组,数组项类型同 items 数组项。
value*-

v-model

当前选中的值。

matchfunction(string|Object, string): boolean=-自定义搜索逻辑。
strictboolean=false建议下拉面板关闭时,若输入值没有完全匹配建议值,那么会清空输入值。
suggest-triggerstring|Array<string>='input'触发建议下拉面板的时机,可用值有:'input''focus'
placeholderstring=输入占位符。
select-on-focusboolean=false聚焦时是否自动选中输入框文本。
compositionboolean=false是否感知输入法输入过程的值。
clearableboolean=false是否显示清除按钮。
disabledboolean=false是否为禁用状态。
readonlyboolean=false是否为只读状态。

插槽

名称描述
suggestions

下拉建议面板插槽。

名称类型描述
datasourceArray<string|Object>数据源,类型同 datasource 属性。
keywordstring搜索关键词。
option-label

下拉面板中选项插槽。

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

事件

名称描述
input

v-model

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

suggest采纳建议时触发,参数是当前值。
clear清除当前值时触发。