vue下拉菜单选择输入框

@ tillhub / vue-search-filter (@tillhub/vue-search-filter)

Vue search input with dropdown for more filters.

Vue搜索输入带有下拉列表，用于更多过滤器。

View Demo 查看演示 Download Source 下载源

安装 (Install)

npm install --save @tillhub/vue-search-filter

用法 (Usage)

Please see example folder for complete code example. Note, that the css has to be imported separately. This library assumes that element-ui is being used by the caller.

请参阅示例文件夹以获取完整的代码示例。 请注意，css必须单独导入。 该库假定调用者正在使用element-ui。

To see the example in action:

要查看实际示例：

npm run serve

属性 (Attributes)

Attribute

Type

Required

Example

Default

Description

width

number

no

500

460

sets fixed width of component in pixels, minimum is 350

locale

string

no

"de"

"en"

Currently only German and English is supported. Only 'de' and 'en '

inputPlaceholder

string

no

"Search in products"

"Search"

Sets the placeholder text in the input field

searchButtonText

string

no

"Submit"

"Search"

Sets a custom text in the blue submitting button

resetButtonText

string

no

"Reset"

"Cancel"

Sets a custom text in the reset button

属性

类型

需要

例

默认

描述

宽度

数

没有

500

460

设置组件的固定宽度(以像素为单位)，最小值为350

地区

串

没有

“ de”

“ en”

目前仅支持德语和英语。 仅“ de”和“ en”

inputPlaceholder

串

没有

“搜索产品”

“搜索”

在输入字段中设置占位符文本

searchButtonText

串

没有

“提交”

“搜索”

在蓝色的提交按钮中设置自定义文本

resetButtonText

串

没有

“重启”

“取消”

在重置按钮中设置自定义文本

大事记 (Events)

Event

Description

Params

submit

triggers when the user clicks on "search" button

filters

reset

triggers when the user clicks on the "reset" button

--

close-dropwdown

triggers when the user closes the dropwdown

--

事件

描述

参数

提交

当用户单击“搜索”按钮时触发

过滤器

重启

当用户单击“重置”按钮时触发

-

关闭

当用户关闭下拉菜单时触发

-

插槽 (Slot)

One named slot it provided: "dropwdown-content". It is highly advised to refer to the example folder to see how this slot is used. Understanding the parent-child communication is crucial as the dropdown content and input content are closely linked.

它提供了一个命名的插槽：“ dropwdown-content”。 强烈建议参考示例文件夹以了解如何使用此插槽。 由于下拉内容和输入内容紧密联系，因此了解亲子沟通至关重要。

Name

Type

Example

Description

input

object

{ key1: { label: "product name", value: "product uuid"}, key2: { label: "branch name", value: "branch uuid"} }

this is an object that depicts the current state of the tags in the input field,

on every change they are passed to the slot so the consumer can update the slot children accordingly.

The key name is determined by the user, when it is being passed in the "addTag" method (see below).

addTag

function

({ name, value, label }) => {}

This method communicates the changes in the slot children to the parent.

It adds tags to the parent input field.E.g. it can be called on every change in the child.

The method expects to be called with an object with at least the "name" prop.

If "label" is falsey, it will default to "value".

名称

类型

例

描述

输入

目的

{key1：{标签：“产品名称”，值：“产品uuid”}，key2：{标签：“分支名称”，值：“ branch uuid”}}

该对象描述了输入字段中标签的当前状态，

在每次更改时，它们都会传递到插槽，以便消费者可以相应地更新插槽子代。

在“ addTag”方法中传递键名时，键名由用户确定(请参见下文)。

addTag

功能

({名称，值，标签})=> {}

此方法将插槽子项中的更改传达给父项。

它将标签添加到父输入字段中，例如可以在子项中的每次更改时调用它。

该方法期望使用至少具有“名称”属性的对象进行调用。

如果“标签”为假，则默认为“值”。

翻译自: https://vuejsexamples.com/vue-search-input-with-dropdown-for-more-filters/

vue下拉菜单选择输入框