VEUI

VEUI on GitHub
Play!EnglishEN

Autocomplete 自动完成

示例

建议触发时机

设置 suggest-trigger 来指定触发建议的时机。

Suggest on input

Suggest on focus

在 GitHub 上编辑此示例编辑
<template>
<article class="autocomplete-normal-demo">
  <section>
    <h3>Suggest on input</h3>
    <veui-autocomplete
      :datasource="suggestions"
      clearable
    />
  </section>
  <section>
    <h3>Suggest on focus</h3>
    <veui-autocomplete
      :datasource="coffees"
      suggest-on-focus="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>

严格模式

设置 strict 属性来指定严格模式。{ maxlength?: boolean } 用来指定是否严格输入长度,超出自动截断;{ select?: boolean } 用来指定输入项是否必须完整匹配搜索建议的某项,若不匹配则失焦后自动清空。

0/6
在 GitHub 上编辑此示例编辑
<template>
<article class="autocomplete-normal-demo">
  <section>
    <veui-checkbox v-model="strict.maxlength">
      Strict maxlength
    </veui-checkbox>
    <veui-checkbox v-model="strict.select">
      Strict select
    </veui-checkbox>
  </section>
  <section>
    <veui-autocomplete
      :datasource="suggestions"
      :maxlength="6"
      :strict="strict"
    />
  </section>
</article>
</template>

<script>
import { Autocomplete, Checkbox } from 'veui'

export default {
  components: {
    'veui-autocomplete': Autocomplete,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      strict: {
        maxlength: false,
        select: true
      },
      suggestions: [
        {
          value: 'Moka'
        },
        {
          value: 'Turkish'
        },
        {
          value: 'Latte'
        },
        {
          value: 'Cappuccino'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  display: flex;
  align-items: center;
  gap: 12px;

  & + & {
    margin-top: 20px;
  }
}
</style>

自定义搜索逻辑

设置 match 属性来自定义高亮逻辑;设置 filter 属性来自定义搜索命中逻辑。

大小写敏感搜索叶子节点

在 GitHub 上编辑此示例编辑
<template>
<article class="autocomplete-normal-demo">
  <section>
    <h3>大小写敏感搜索叶子节点</h3>
    <veui-autocomplete
      :datasource="suggestions"
      :match="match"
      :filter="filter"
    />
  </section>
</article>
</template>

<script>
import { Autocomplete } from 'veui'

export default {
  components: {
    'veui-autocomplete': Autocomplete
  },
  data () {
    return {
      suggestions: [
        {
          value: 'Milk coffee',
          options: [
            {
              value: 'Moka'
            }
          ]
        },
        {
          value: 'Turkish'
        },
        {
          value: 'Latte'
        },
        {
          value: 'Cappuccino'
        }
      ]
    }
  },
  methods: {
    match ({ label }, keyword) {
      const index = label.indexOf(keyword)
      return index >= 0
        ? [[index, index + keyword.length]]
        : false
    },
    filter ({ options }, _, { offsets }) {
      // 不要父节点,只要叶子节点
      return options && options.length
        ? false
        : offsets === true || (!!offsets && !!offsets.length)
    }
  }
}
</script>

<style lang="less" scoped>
.autocomplete-normal-demo {
  display: flex;

  section + section {
    margin-left: 60px;
  }
}
</style>

API

属性

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

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

名称类型描述
labelstring节点的文字描述。
valuestring节点对应的值。
optionsArray<Object>节点的子节点数组,数组项类型同 datasource 数组项。
value*-

v-model

当前选中的值。

disabledbooleanfalse是否为禁用状态。
readonlybooleanfalse是否为只读状态。
match(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>-支持自定义高亮逻辑,默认进行大小写不敏感的子串匹配。
filter(item, keyword, { ancestors, offsets }) => boolean-支持自定义搜索命中逻辑。
suggest-triggerstring | Array<string>'input'触发建议下拉面板的时机,可用值有:'input''focus'
expandedbooleanfalse

.sync

建议面板是否展开(如果 suggestions 中没有待选项,则即使为 true 时面板也会关闭)。

placeholderstring-输入占位符。
clearablebooleanfalse是否显示清除按钮。
compositionbooleanfalse是否感知输入法输入过程的值。
autofocusbooleanfalse是否自动获取焦点。
select-on-focusbooleanfalse聚焦时是否自动选中输入框文本。
maxlengthnumber-输入字符串的长度限制。
strictboolean | Objectfalse

当为 boolean 时,将同时配置 maxlength 和是否必须完全匹配建议值两种行为的严格模式;当为 Object 时,可进行分别配置。

名称类型描述
maxlengthboolean是否严格输入长度,超出禁止输入。
selectboolean输入项是否必须完整匹配搜索建议的某项,若不匹配则失焦后自动清空。
get-lengthfunction(string): number自定义的字符长度计算函数。
trimboolean | stringfalse

是否移除前后空格。当为 true 时,会移除前后空格,当为 false 时,不移除前后空格。设置为字符串时,按指定方式进行移除。

描述
both移除两端空格。等同于 true 时的行为。
start移除开始空格。
end移除末尾空格。
overlay-classstring | Array | Object-参考 Overlay 组件的 overlay-class 属性。
overlay-stylestring | Array | Object-参考 Overlay 组件的 overlay-style 属性。

插槽

名称描述
suggestions

下拉建议面板插槽。

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

下拉面板中选项插槽。

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

无匹配的候选项时需要展示的内容。默认在无候选项时关闭下拉菜单。

名称类型描述
keywordstring搜索关键词。

事件

名称描述
input

v-model

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

select采纳建议时触发,参数是当前值。
toggle提示面板展开状态切换时触发,回调参数为 (expanded: boolean)expanded 表示操作将触发提示面板展开还是收起。
clear清除当前值时触发。

自定义样式

名称类型默认值描述
--dls-dropdown-max-display-items<integer>8

下拉选项同时显示的最大项目数,下拉框的最大高度将由此计算得出。

在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024