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.

請(qǐng)參閱示例文件夾以獲取完整的代碼示例。 請(qǐng)注意，css必須單獨(dú)導(dǎo)入。 該庫(kù)假定調(diào)用者正在使用element-ui。

To see the example in action:

要查看實(shí)際示例：

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

屬性

類型

需要

例

默認(rèn)

描述

寬度

數(shù)

沒有

500

460

設(shè)置組件的固定寬度(以像素為單位)，最小值為350

地區(qū)

串

沒有

“ de”

“ en”

目前僅支持德語和英語。 僅“ de”和“ en”

inputPlaceholder

串

沒有

“搜索產(chǎn)品”

“搜索”

在輸入字段中設(shè)置占位符文本

searchButtonText

串

沒有

“提交”

“搜索”

在藍(lán)色的提交按鈕中設(shè)置自定義文本

resetButtonText

串

沒有

“重啟”

“取消”

在重置按鈕中設(shè)置自定義文本

大事記 (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

--

事件

描述

參數(shù)

提交

當(dāng)用戶單擊“搜索”按鈕時(shí)觸發(fā)

過濾器

重啟

當(dāng)用戶單擊“重置”按鈕時(shí)觸發(fā)

-

關(guān)閉

當(dāng)用戶關(guān)閉下拉菜單時(shí)觸發(fā)

-

插槽 (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.

它提供了一個(gè)命名的插槽：“ dropwdown-content”。 強(qiáng)烈建議參考示例文件夾以了解如何使用此插槽。 由于下拉內(nèi)容和輸入內(nèi)容緊密聯(lián)系，因此了解親子溝通至關(guān)重要。

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：{標(biāo)簽：“產(chǎn)品名稱”，值：“產(chǎn)品uuid”}，key2：{標(biāo)簽：“分支名稱”，值：“ branch uuid”}}

該對(duì)象描述了輸入字段中標(biāo)簽的當(dāng)前狀態(tài)，

在每次更改時(shí)，它們都會(huì)傳遞到插槽，以便消費(fèi)者可以相應(yīng)地更新插槽子代。

在“ addTag”方法中傳遞鍵名時(shí)，鍵名由用戶確定(請(qǐng)參見下文)。

addTag

功能

({名稱，值，標(biāo)簽})=> {}

此方法將插槽子項(xiàng)中的更改傳達(dá)給父項(xiàng)。

它將標(biāo)簽添加到父輸入字段中，例如可以在子項(xiàng)中的每次更改時(shí)調(diào)用它。

該方法期望使用至少具有“名稱”屬性的對(duì)象進(jìn)行調(diào)用。

如果“標(biāo)簽”為假，則默認(rèn)為“值”。

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

vue下拉菜單選擇輸入框

總結(jié)

以上是生活随笔為你收集整理的vue 下拉框筛选列表_vue下拉菜单选择输入框_带有下拉菜单的Vue搜索输入可提供更多过滤条件...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。