Vue 3 的简单 Typeahead 组件 - vue3-simple-typeahead

Vue 3 的简单 Typeahead 组件 - vue3-simple-typeahead
插件名称 frikinside
发布时间 2021年12月23日
插件作者 vue3-simple-typeahead

一个简单而轻量级的 Vue3 typeahead/autocomplete 组件,在用户输入时显示建议的元素列表。

安装和下载:

# NPM
$ npm i vue3-simple-typeahead

使用:

1. 导入并注册组件。

// 全局
import { createApp } from 'vue';
import App from './App.vue';
import SimpleTypeahead from 'vue3-simple-typeahead';
import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css';
let app = createApp(App);
app.use(SimpleTypeahead);
app.mount('#app');

// 局部
import SimpleTypeahead from 'vue3-simple-typeahead'
import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css'
export default {
  name: 'my-vue-component',
  components: {
    SimpleTypeahead
  }
}

2. 将 <vue3-simple-typeahead /> 组件添加到应用程序中。

<vue3-simple-typeahead
  id="demo"
  placeholder="Type Something..."
  :items="['Vue','Script','Com',...]"
  :minInputLength="1"
  :itemProjection="itemProjectionFunction"
  @selectItem="selectItemEventHandler"
>
</vue3-simple-typeahead>

3.默认组件道具。

id: {
  type: String,
},
placeholder: {
  type: String,
  default: '',
},
items: {
  type: Array,
  required: true,
},
defaultItem: {
  default: null,
},
itemProjection: {
  type: Function,
  default(item) {
    return item;
  },
},
minInputLength: {
  type: Number,
  default: 2,
  validator: (prop) => {
    return prop >= 0;
  },
},

4. 事件处理程序。

  • @selectItem
  • @onInput
  • @onFocus
  • @onBlur