Vue.js的自动完成组件– vue-simple-suggest

Vue.js的自动完成组件– vue-simple-suggest
插件名称 vue-simple-suggest
版本号 v1.11.1
发布时间 2020年10月11日
插件作者 KazanExpress

vue-simple-suggest是Vue.js应用程序的一个简单但功能丰富的自动完成组件。

安装和下载:

# NPM
$ npm install vue-simple-suggest --save

特征:

  • v模型支持。
  • 切换v模型类型(选择/输入)。
  • 通过默认插槽的自定义输入元素。
  • 通过命名作用域插槽的自定义列表项。
  • 提供所有用于默认输入元素的HTML5有效道具(类型,tabindex等)。
  • 可自定义的键盘控件。
  • 丰富而简单的API。
  • CSS类,可快速轻松地重新样式化。
  • 许多构建变体可供选择。
  • 灵活和可定制的组件设计。

简单的例子

如果您需要从静态数组中提出建议:

<!-- Some component.vue -->
<template>
  <vue-simple-suggest
    v-model="chosen"
    :list="simpleSuggestionList"
    :filter-by-query="true">
<!-- 过滤输入文本,只显示匹配的结果 -->
  </vue-simple-suggest>

  <br>

  <p>Chosen element: {{ chosen }}</p>
</template>

<script>
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Optional CSS

  export default {
    components: {
      VueSimpleSuggest
    },
    data() {
      return {
        chosen: ''
      }
    },
    methods: {
      simpleSuggestionList() {
        return [
          'Vue.js',
          'React.js',
          'Angular.js'
        ]
      }
    }
  }
</script>

变更日志:

06/30/2021

  • v1.11.1:更新

06/01/2021

  • v1.11:修正错误

2021年5月5日

  • v1.10.4

2020年10月9日

  • v1.10.3

11/05/2019

  • 错误修复
  • 更新了输入行为
  • 新的showList控件