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
功能
({名称,值,标签})=> {}
此方法将插槽子项中的更改传达给父项。
它将标签添加到父输入字段中,例如可以在子项中的每次更改时调用它。
该方法期望使用至少具有“名称”属性的对象进行调用。
如果“标签”为假,则默认为“值”。
翻译自: /vue-search-input-with-dropdown-for-more-filters/
vue下拉菜单选择输入框
vue 下拉框筛选列表_vue下拉菜单选择输入框_带有下拉菜单的Vue搜索输入可提供更多过滤条件...