Mand MobileDropMenu 下拉菜单
下拉菜单可用于列表筛选
引入
import { DropMenu } from 'mand-mobile-next'
Vue.createApp().component(DropMenu.name, DropMenu)
代码演示
API
DropMenu Props
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| data | 数据源 | Array<DropMenuBarItem> | [] | |
| default-value | 初始值 | Array<String> | [] | - |
| option-render | 返回各选项渲染内容 | Function(option: DropMenuListItem):String | - | vue 2.1.0+可使用slot-scope，参考Radio |
DropMenuBarItem
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| text | 文案 | String | ||
| disabled | 禁用 | Boolean | false | |
| options | 选项数据 | Array<DropMenuListItem> | [] | |
| [property] | 其它数据 | any |
DropMenuListItem
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| text | 文案 | String | ||
| disabled | 禁用 | Boolean | false | |
| [property] | 其它数据 | any |
DropMenu Methods
getSelectedValue(index)
获取某菜单项选中值
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| index | 菜单项索引值 | Number | - |
返回
| 属性 | 说明 | 类型 |
|---|---|---|
| listItem | 选项数据 | Object: DropMenuListItem |
getSelectedValues()
获取所有菜单项选中值
返回
| 属性 | 说明 | 类型 |
|---|---|---|
| listItems | 选项数据 | Array<DropMenuListItem> |
DropMenu Events
@change(barItem, listItem)
选中某项事件
| 属性 | 说明 | 类型 |
|---|---|---|
| barItem | 菜单项数据 | Object: DropMenuBarItem |
| listItem | 选项数据 | Object: DropMenuListItem |
@show()
下拉菜单展示事件
@hide()
下拉菜单隐藏事件