Package Exports

vue-dynamic-dropdown

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-dynamic-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Feedback would be much appreciated, questions, suggestions, issues are more than welcome.

Demo

A dropdown demo gif

Usage

Install via NPM npm i vue-dynamic-dropdown

Then require in your project:

var VueDropdown = require('vue-dynamic-dropdown');

or ES6 syntax:

import VueDropdown from 'vue-dynamic-dropdown'

Then you can register the component globally:

Vue.component('vue-dropdown', VueDropdown);

Or in your Vue component:

components: {
  VueDropdown
}

You can then use the following selector anywhere in your project:

To get up and running quick the package now supports rendering just the selector with default values

<vue-dropdown></vue-dropdown>

Docs

config: {...} is a configuration object that is to be binded to vue-dropdown, api properties are:

Basics

Property	Type	Description
options	array	holds the inner selection options of the dropdown(shown when open), each single option is an object that has the `value` key that pairs with the given value e.g `{ value: '1st Option' }`
width	number	determines the width of the dropdown button & options drawer
placeholder	string	The text shown on the dropdown button defaultly
prefix	string	A text prefix that will be added before the placeholder text

Customized Styling

Property	Type	Description
backgroundColor	string	Set the dropdown button & options area background color
hoverBackgroundColor	string	Set the dropdown button & options hover background color
border	string	Set the dropdown button & options border
textColor	string	Set the dropdown button & options text color

Events

Event Name	Returns	Description
setSelectedOption	Option Obj	Clicking a dropdown option emits an option data object upwards like so

Listening to the event e.g:

<vue-dropdown @setSelectedOption="myLocalSetterFunction($event)"></vue-dropdown>

Implemntation Example

Define your config options object in the component importing VueDropdown e.g

data: function() {
    return {
        config: {
            options: [
                {
                    value: "option 1"
                },
                {
                    value: "option 2"
                },
                {
                    value: "option 3"
                },
            ],
            prefix: "The",
            backgroundColor: "green"
        }
    }
}

And bind it to the selector like so

<vue-dropdown :config="config"></vue-dropdown>

vue-dynamic-dropdown