vue-drop-down-searcher

Customisable dropdown select for Vue

 Whats New

• Customizable selected dropdown color added
• Customizable tag color added

Features

• Configurable via props
• Plugin is supportable for mouse outside click
• Auto position
• Small bundle size

Installation

npm i vue-drop-down-searcher

Website

Demo Npm Link

Usage

Import :

import DropDown from "vue-drop-down-searcher";

and use as

<DropDown list={list} selectedList={selectedItem} toggleItem={val => toggleItem(val)} handleInputChange= {(val)=>handleInputChange(val)}/>

API

Component Props

| Prop | Type | Default | Description | | ----------------- | ----------- | ------- | ---------------------------------------------------------------------------------------------------- | | list | ArrayObject | [] | These array values will show in the dropdown | | placeholder | String | Search | Input field placeholder | | searchKey | String | Empty | Search Key for filter | isSingle | bool | false | if true, only one value can be selected from dropdown otherwise multi value can be selected dropdown | | labelName | String | title | This value used to show which value is from the object in dropdown | | selectedlabelName | String | title | From which value from the object need to show in the taginput | | selectedList | ArrayOBject | [] | If values set, it will show those values as tag input | | tagColor | String | #0074D9 | This color is used to set the background color to selected dropdown value in the text input | | selectedDropdownColor | String | #0074D9 | This color is used to set the background color to selected index in dropdown

Callback props

by using render props to override components some of the functionality will have to be >handled manually with a help of internal props, states and methods exposed

| Prop | Type | Default | Description | | ------------ | ---- | ------- | ------------------------------------------------------ | | toggleItem | func | | This will return the selected values from dropdwon | | inputChanged | func | | When type something from the textfiled it will trigger |

Screenshots

• Main Image

• Single Dropdown

• Multi Dropdown

License MIT