Bootstrap 4的简单自动完成/预输入组件 - vue-typeahead-bootstrap

Bootstrap 4的简单自动完成/预输入组件 - vue-typeahead-bootstrap
插件名称 vue-typeahead-bootstrap
版本号 v2.8.0
发布时间 2020年6月4日
插件作者 mattzollinhofer

一个简单但可配置的Vue.js和Bootstrap 4自动完成和预输入组件。易于与任何基于JSON的API集成。

变更日志:

v2.8.0(02/09/2021)

  • 错误修复

v2.7.2(01/01/2021)

  • 更新Highlight.js中的安全漏洞

v2.5.6(2020年12月28日)

  • 正式关闭IE修复

v2.5.5(2020年12月20日)

  • 在依赖项中包含lodash

v2.5.4(11/12/2020)

  • 减小包装尺寸

v2.5.3(09/28/2020)

  • 尝试过改进以使用标准组合框aria标签
  • 修复IE下拉菜单关闭
  • 修复损坏的按键处理事件
  • 从输入传播按键事件

v2.4.1(07/05/2020)

  • 添加对禁用列表项的支持
  • 给定空查询时修复错误

v2.3.0(06/18/2020)

  • 添加对提供输入名称的支持

安装和下载:

# Yarn
$ yarn add vue-typeahead-bootstrap

# NPM
$ npm install vue-typeahead-bootstrap --save

如何使用它:

1.安装并导入vue-typeahead-bootstrap组件。

import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';

2.注册组件。

// 全局
Vue.component('vue-typeahead-bootstrap', VueTypeaheadBootstrap)
// 或本地
export default {
  components: {
    VueTypeaheadBootstrap
  }
}

3.使用预输入功能创建一个简单的国家/地区选择。

template>
  <div>
    Options: `Canada, United States, Mexico`,
    <vue-typehead-bootstrap
      :data="['Canada', 'United States', 'Mexico']"
      v-model="query"
      placeholder="Choose a country"
    />
    Selected Country: {{query}}
  </div>
</template>
export default {
  data(){
    return {
      query: ''
    }
  }
}

4.可用 props 。

size: {
  type: String,
  default: null,
  validator: size => ['lg', 'sm'].indexOf(size) > -1
},
value: {
  type: String
},
disabled: {
 type: Boolean,
 default: false
},
data: {
  type: Array,
  required: true,
  validator: d => d instanceof Array
},
serializer: {
  type: Function,
  default: (d) => d,
  validator: d => d instanceof Function
},
backgroundVariant: String,
textVariant: String,
inputClass: {
  type: String,
  default: ''
},
maxMatches: {
  type: Number,
  default: 10
},
minMatchingChars: {
  type: Number,
  default: 2
},
disableSort: {
  type: Boolean,
  default: false
},
showOnFocus: {
  type: Boolean,
  default: false
},
showAllResults: {
  type: Boolean,
  default: false
},
autoClose: {
  type: Boolean,
  default: true
},
placeholder: String,
prepend: String,
append: String,
highlightClass: String