mand-mobile
Version:
A Vue.js 2.0 Mobile UI Toolkit
67 lines (46 loc) • 1.63 kB
Markdown
---
title: DropMenu
preview: https://didi.github.io/mand-mobile/examples/#/drop-menu
---
Drop-down menu is for list filtering
### Import
```javascript
import { DropMenu } from 'mand-mobile'
Vue.component(DropMenu.name, DropMenu)
```
### Code Examples
<!-- DEMO -->
### API
#### DropMenu Props
|Props | Description | Type | Default | Note|
|----|-----|------|------|------|
|data|data source|Array<{text, disabled, options, ...}>|`[]`|`disabled` is whether to disable a button or not; the type of `options` is `Array<{text, disabled, ...}>`|
|default-value|initial value|Array<String>|`[]`|-|
|option-render|return rendering contents of each option|Function({text, disabled, ...}):String|-|`vue 2.1.0+` can use `slot-scope`，refer to `Radio`|
#### DropMenu Methods
##### getSelectedValue(index): listItem
Get selected value of a `barItem`
|Parameters | Description | Type| Default|
|----|-----|------|------|
|index|index of `barItem`|Number|-|
Returns
|Props | Description | Type|
|----|-----|------|
|listItem|data of `listItem`|Object: {text, disabled, options, ...}|
##### getSelectedValues(): listItems
Get selected values of all `barItem`
Returns
|Props | Description | Type|
|----|-----|------|
|listItems|dataset of `listItem`|Array<{text, disabled, options, ...}>|
#### DropMenu Events
##### @change(barItem, listItem)
Select some event
|Props | Description | Type|
|----|-----|------|
|barItem|data of `barItem`|Object: {text, disabled, options, ...}|
|listItem|data of `listItem`|Object: {text, disabled, ...}|
##### @show()
Show events on drop-down menu
##### @hide()
Hide events on drop-down menu