DropdownCustom can add custom classNamedrop-down controls that define various modes that className will be applied .h-dropdowncustom-show. The dom is the element that triggers the drop-down, contains the custom content, and the icon for the right-hand display state.
Tip: The system comes with a h-text-dropdown class.
Note: if DropdownCustom is on the right side of the page and the display is abnormal, please set the width for the content.
Note: Because the style is applied to the component vue, style with scope properties in the calling file will be invalid.
In non-string templates，it is necessary to use h-dropdowncustom.
placement: top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end
Separately control the displacement of left, top.
| Property | Description | Type | Optional | Default |
|---|---|---|---|---|
| trigger | Trigger method | String | click, hover, focus, contextMenu | click |
| equalWidth | Whether the width of the dom is equal to the trigger | Boolean | - | false |
| disabled | Boolean | - | false | |
| toggleIcon | Whether to show the display status icon | Boolean | - | true |
| placement | Menu display position | Stirng |
top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end |
bottom-start |
| className | Add a class for the click-triggered dom | String | - | - |
| offset | Displacement | String, Number | - |
left, top
10
'10%'
'10, 10'
'10%, 10'
'10 + 10%'
'10 - 5vh + 3%'
'-10px + 5vh, 5px - 6%'
|
| Method | Description |
|---|---|
| show | Show dropdown |
| update | Update the location of the dropdown |
| hide | Turn off dropdown |
| Event | Description |
|---|---|
| show | Triggered when opened |
| hide | Triggered when closed |