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下拉菜單選擇輸入框

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。