1.5 KiB
1.5 KiB
| title | preview |
|---|---|
| DropMenu 下拉菜单 | https://didi.github.io/mand-mobile/examples/#/drop-menu |
下拉菜单可用于列表筛选
引入
import { DropMenu } from 'mand-mobile'
Vue.component(DropMenu.name, DropMenu)
代码演示
API
DropMenu Props
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| data | 数据源 | Array<{text, disabled, options, ...}> | [] |
disabled为是否禁用,options类型为Array<{text, disabled, ...}> |
| default-value | 初始值 | Array | [] |
- |
| option-render | 返回各选项渲染内容 | Function({text, disabled, ...}):String | - | vue 2.1.0+可使用slot-scope,参考Radio |
DropMenu Methods
getSelectedValue(index): listItem
获取某菜单项选中值
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| index | 菜单项索引值 | Number | - |
返回
| 属性 | 说明 | 类型 |
|---|---|---|
| listItem | 选项数据 | Object: {text, disabled, options, ...} |
getSelectedValues(): listItems
获取所有菜单项选中值
返回
| 属性 | 说明 | 类型 |
|---|---|---|
| listItems | 选项数据 | Array<{text, disabled, options, ...}> |
DropMenu Events
@change(barItem, listItem)
选中某项事件
| 属性 | 说明 | 类型 |
|---|---|---|
| barItem | 菜单项数据 | Object: {text, disabled, options, ...} |
| listItem | 选项数据 | Object: {text, disabled, ...} |
@show()
下拉菜单展示事件
@hide()
下拉菜单隐藏事件