DropdownCustom可以添加自定义的className定义各种不同的模式的下拉控件,className将应用在.h-dropdowncustom-show上,该dom为触发下拉的元素,包含自定义的内容以及右侧展示状态的icon。
提示:系统自带一个h-text-dropdown的样式。
注意1:如果DropdownCustom在页面最右边,并且显示异常,请给内容设定固定宽度。
注意2:由于该样式应用在组件中,所以在调用的vue文件中,style的scope属性将无效。
非 template/render 模式下,请使用 h-dropdowncustom。
placement: top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end
分别控制left, top的位移
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| trigger | 触发方式 | String | click, hover, focus, contextMenu | click |
| equalWidth | 是否和触发的dom等宽 | Boolean | - | false |
| disabled | 是否禁用 | Boolean | - | false |
| toggleIcon | 是否显示展示状态的icon | Boolean | - | true |
| placement | menu显示的位置 | Stirng |
top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end |
bottom-start |
| className | 为点击触发的dom添加class | String | - | - |
| offset | 位移 | String, Number | - |
left, top
10
'10%'
'10, 10'
'10%, 10'
'10 + 10%'
'10 - 5vh + 3%'
'-10px + 5vh, 5px - 6%'
|
| 参数 | 说明 |
|---|---|
| show | 显示dropdown |
| update | 更新dropdown的位置 |
| hide | 关闭dropdown |
| 参数 | 说明 | 参数 |
|---|---|---|
| show | 打开的时候触发 | |
| hide | 关闭的时候触发 |