下拉菜单 Dropdown
当你想触发一些操作的时候。
演示
基础用法
触发
显示箭头
禁用选项
自定义下拉菜单
分组下拉
可搜索下拉框
使用插槽
溢出显示tip
API
Dropdown Props
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|
| options | Array | [] | [] | 数据列表 |
| text | String | any | - | 触发下拉菜单的文字内容 |
| type | String | text | button | text | 触发下拉菜单的类型，默认text |
| trigger | String | hover | click | hover | 触发的方式, 默认hover |
| showArrow | Boolean | true | false | false | 下拉框是否显示箭头 |
| showSearch | Boolean | true | false | false | 是否有可搜索下拉框 |
| search | v-model:search | String | Number | - | '' | 搜索框绑定的值 |
| modelValue | v-model | Boolean | true | false | false | 手动触发绑定的值 |
| open | v-open | Boolean | true | false | false | 手动控制显示隐藏时绑定的值 |
弹框采用Popover，可传入任意Popover的属性
Options Attributes （options单个对象中的属性）
| 参数 | 类型 | 说明 |
|---|
| label | String | 下拉操作项内容 (必须) |
| key | String | 下拉操作项唯一标识(必须) |
| disabled | Boolean | 下拉操作项是否禁用 |
| type | String | 分组下拉的类型（可选值divider） |
| divider | Boolean | 是否展示分割线 |
| slotName | String | 每项插槽的名称 |
Dropdown 插槽
| 名称名 | 说明 |
|---|
| empty | 空状态 |
| slotName | 每项插槽的名称 |
Dropdown Methods
| 名称 | 类型 | 说明 |
|---|
| show | (status: boolean) => void | 下拉菜单展开的回调 |
| close | (status: boolean) => void | 下拉菜单关闭的回调 |
| change | (value: string, option: OptionType) => void | 选中值发生变化时触发 |
| optionClick | (value: string, option: OptionType) => void | 选项点击时触发 |
| btnClick | (e:MouseEvent) => void | 按钮类型按钮点击时触发 |
Meri Plus