vue组件 .vue_一个很好的Vue Autosuggest组件

vue组件 .vue

自动提示 (vue-autosuggest)

Autosuggest component built for Vue.

为Vue构建的Autosuggest组件。

View demo 查看演示 Download Source 下载源

特征 (Features)

• WAI-ARIA complete autosuggest component built with the power of Vue.

  WAI-ARIA使用Vue的功能构建的完整自动建议组件。

• Full control over rendering with built in defaults or custom components for rendering.

  使用内置的默认值或自定义组件进行渲染的完全控制。

• Easily integrate AJAX data fetching for list presentation.

  轻松集成AJAX数据获取以进行列表显示。

• Supports multiple sections.

  支持多个部分。

• No opinions on CSS, full control over styling.

  对CSS没有意见，可以完全控制样式。

• Rigorously tested.

  经过严格测试。

安装 (Installation)

This module is distributed via [npm][npm] which is bundled with [node][node] and should be installed as one of your project's dependencies:

该模块通过[npm] [npm]分发，该模块与[node] [node]捆绑在一起，应作为项目的dependencies之一安装：

npm install --save vue-autosuggest

or

要么

yarn add vue-autosuggest

用法 (Usage)

Load VueAutosuggest into your vue app globally.

将VueAutosuggest全局加载到您的vue应用中。

import VueAutosuggest from 'vue-autosuggest';
Vue.use(VueAutosuggest);

or locally inside a component:

或在组件内部：

import { VueAutosuggest } from 'vue-autosuggest';
export default {
  ...
  components: {
      VueAutosuggest
  }
  ...
};

Place the component into your app!

将组件放入您的应用程序！

<vue-autosuggest 
    :suggestions="[{data:['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn']}]"
    :onSelected="clickHandler"
    :inputProps="{id:'autosuggest__input', onInputChange: this.onInputChange, placeholder:'Do you feel lucky, punk?'}"
/>

For more advanced usage, check out the examples below, and explore the properties you can use.

有关更高级的用法，请查看以下示例，并探索可以使用的属性 。

道具 (Props)

Prop	Type	Required	Description
suggestions	Array	✓	Suggestions to be rendered.
inputProps	Object	✓	Add props to the <input>.
sectionConfigs	Object		Define multiple sections <input>.
onSelected	Function	✓(*)	*If not using sectionConfigs[index].onSelected() then this will trigger. Must be implemented in either sectionConfigs prop or on root prop.

Struts	类型	需要	描述
suggestions	数组	✓	提出的建议。
inputProps	目的	✓	将道具添加到<input> 。
sectionConfigs	目的		定义多个部分<input> 。
onSelected	功能	✓(*)	*如果不使用sectionConfigs[index].onSelected()则会触发该事件。 必须在sectionConfigs或root sectionConfigs实现。

inputProps (inputProps)

Prop	Type	Required	Description
id	String	✓	id attribute on <input>.
onInputChange	Function	✓	Triggers everytime the <input> changes.
onClick	Function		Triggers everytime the <input> is clicked.
initialValue	String		Set some initial value for the <input>.
Any DOM Props	*		You can add any props to <input> as the component will v-bind inputProps. Similar to rest spread in JSX. See more details here: https://vuejs.org/v2/api/#v-bind

Struts	类型	需要	描述
id	串	✓	<input>上的id属性。
onInputChange	功能	✓	每当<input>更改时触发。
onClick	功能		每次单击<input>触发。
initialValue	串		为<input>设置一些初始值。
任何DOM道具	*		您可以将任何道具添加到<input>因为该组件将对inputProps进行v-bind 。 类似于JSX中的其余部分。 在此处查看更多详细信息： https : //vuejs.org/v2/api/#v-bind

sectionConfigs (sectionConfigs)

Multiple sections can be defined in the sectionConfigs prop which defines the control behavior for each section.

可以在sectionConfigs中定义多个部分，该sectionConfigs定义每个部分的控制行为。

Prop	Type	Required	Description
onSelected	Function	✓	Determine behavior for what should happen when a suggestion is selected. e.g. Submit a form, open a link, update a vue model, tweet at Ken Wheeler etc.
type	String		Vue component name for specifying which type to implement using Vue's <component :is="componentName"></component> functionality. See DefaultSection.vue for scaffolding a new type. You must declare your component in the scope of the app using Vue.component(). You can extend DefaultSection using extends. See UrlSection for an example.
limit	Number		Limit each section by some value. Default: Infinity

Struts	类型	需要	描述
onSelected	功能	✓	确定选择建议后应采取的行动。 例如，提交表单，打开链接，更新vue模型，在Ken Wheeler上发推文等。
type	串		Vue组件名称，用于指定使用Vue的<component :is="componentName"></component>功能实现的类型。 有关搭建新类型的信息，请参见DefaultSection.vue 。 您必须使用Vue.component()在应用程序范围内声明组件。 您可以使用extends扩展DefaultSection。 有关示例 ，请参见UrlSection 。
limit	数		将每个部分限制为某个值。 默认值： Infinity

Below we have defined a default section and a blog section. The blog section has a component type of url-section which corresponds to which component the Autosuggest loads. When type is not defined, Vue-autosuggest will use a built in DefaultSection.vue component.

在下面，我们定义了default部分和blog部分。 blog部分的url-section组件type与Autosuggest加载的组件相对应。 如果未定义type，则Vue-autosuggest将使用内置的DefaultSection.vue组件。

sectionConfigs: {
    'default': {
        limit: 6,
        onSelected: function(item, originalInput) {
            console.log(item, originalInput, `Selected "${item.item}"`);
        }
    },
    'blog': {
        limit: 3,
        type: "url-section",
        onSelected: function() {
            console.log("url: " + item.item.url);
        }
    }
}

翻译自: https://vuejsexamples.com/a-nice-vue-autosuggest-component/

vue组件 .vue