Vue.js的建议列表输入

暗示建议 (vue-suggestion)

Suggestion list input for Vue.js, inspired by v-autocomplete. Your search engine, your CSS, your everything...

受v-autocomplete启发的Vue.js建议列表输入。 您的搜索引擎，CSS，所有内容...

View demo 查看演示 View Github 查看Github

安装 (Installation)

• yarn: yarn add vue-suggestion

  纱线 ： yarn add vue-suggestion

• npm: npm i --save vue-suggestion

  npm ： npm i --save vue-suggestion

用法 (Usage)

• Import default CSS to your project:

  将默认CSS导入项目：

  import 'vue-suggestion/dist/vue-suggestion.css';

• Import vue-suggestion into your Vue component and use it as normal:

  将vue-suggestion导入您的Vue组件，并按常规使用它：

  <template>
  ...
    <vue-suggestion></vue-suggestion>
  ...
  <template>
  <script>
  import VueSuggestion from 'vue-suggestion'   
  export default {
    ...
    components: {
      VueSuggestion
    }
  }
  </script>

!! 您也可以将其用作vue-form-generator的自定义字段。 (!! You can also use it as a custom field of vue-form-generator.)

道具 (Props)

Property value	Type	Default value	Description
itemTemplate	vue component		Template for item in suggestion list
setLabel	function		Value of choosen input, be shown in the input
items	Array	[]	Suggestion array, should be updated dynamically after onInputChange()
minLen	Interger	2	Minimun number of characters inputted to start searching
disabled	Boolean	false	Disable the input
placeholder	String	''	Placeholder of the input

适当的价值	类型	默认值	描述
itemTemplate	Vue组件		建议清单中项目的模板
setLabel	功能		所选输入的值，将显示在输入中
项目	数组	[]	建议数组，应在onInputChange()之后动态更新
民联	英格	2	输入的最小字符数开始搜索
残障人士	布尔型	false	禁用输入
占位符	串	''	输入的占位符

大事记 (Events)

Property value	Arguments	Description
onInputChange	String	Fires when the input changes with the argument is the current input text.
onItemSelected	Object	Fires when user selects a suggestion

适当的价值	争论	描述
onInputChange	串	当输入随参数更改为当前输入文本时触发。
onItemSelected	目的	用户选择建议时触发

插槽 (Slots)

Name	Description
searchSlot	Next to the input, for the custom search icon or button...

名称	描述
searchSlot	输入旁边的自定义搜索图标或按钮...

样式 (Style)

Just overwrite their css classes:

只需覆盖他们CSS类：

.vue-suggestion
  .vue-suggestion-input-group
    .vue-suggestion-input
  .vue-suggestion-list
    .vue-suggestion-list-item
      &.vue-suggestion-item-active

例 (Example)

<template>
  <vue-suggestion :items="items" 
                  v-model="item", 
                  :setLabel="setLabel",
                  :itemTemplate="itemTemplate", 
                  @onInputChange="inputChange", 
                  @onItemSelected="itemSelected">
  </vue-suggestion>
</template>

<script>
import itemTemplate from './item-template.vue';
export default {
  data () {
    return {
      item: {},
      items: [
        { id: 1, name: 'Golden Retriever'},
        { id: 2, name: 'Cat'},
        { id: 3, name: 'Squirrel'},
      ],
      itemTemplate,
    }
  },
  methods: {
    itemSelected (item) {
      this.item = item;
    },
    setLabel (item) {
      return item.name;
    },
    inputChange (text) {
      // your search method
      this.items = items.filter(item => item.name.contains(text));
      // now `items` will be showed in the suggestion list
    },
  },
};
</script>

ItemTemplate example:

ItemTemplate示例：

<template>
  <div>
    <b>#{{item.id}}</b>
    <span>{{ item.name }}</span>
  </div>
</template>

<script>
export default {
  props: {
    item: { required: true },
  }
}
</script>

演示用法 (Demo Usage)

# install dependencies
$ yarn/npm install

# compile demo for development
$ yarn/npm dev

# open Browser and start serve in demo
$ yarn/npm demo:open

# compile dist demo
$ yarn/npm dist:demo

# compile dist
$ yarn/npm dist

翻译自: https://vuejsexamples.com/suggestion-list-input-for-vue-js/