Simple multi-level menu on Vue3
npm install -save vue3-menu
import { Vue3Menu } from 'vue3-menu';To apply styles
import 'vue3-menu/src/assets/menu.css';Or you can add your own menu styles using the .epic-menu class for menu
| Prop | Default | Required | Type |
|---|---|---|---|
| items | true | MenuItemProps[]Array of menu items |
|
| appendTo | "body" | false | stringThe element where the menu will be added during rendering |
| anchor | [0, 1] | false | [number, number]Two values setting the starting position or anchor point of the menu relative to its target |
| offset | [0, 0] | false | [number, number]An array of two numbers to offset the menu horizontally and vertically in pixels |
| behavior | "click" | false | "click" | "hover"Specifies exactly how the menu will open, either by click or on hover |
| customClassName | false | stringAdditional class name for customizing menus with custom styles. When rendering the menu uses Teleport, that's why this property was added |
|
| context | false | booleanDefines the context menu display mode |
| Prop | Default | Required | Type |
|---|---|---|---|
| icon | false | ComponentInternalInstanceAdds an icon before the menu item label. |
|
| label | false | string | numberMenu item label |
|
| items | false | MenuItemProps[]An array of settings for creating submenus. |
|
| style | false | StyleValueDefining styles for menu item formatting |
|
| shortcut | false | stringHotkey indicator. The indicator is inserted after the menu item label |
|
| component | false | ComponentInternalInstanceInstead of a standard menu item, you can add any component |
|
| separator | false | booleanInstead of a menu item there will be a separator |
|
| command | false | functionHandler called when a menu item is clicked |
|
| stopPropagation | false | booleanstopPropagation |
const items = [{
label: 'Upload from computer',
}, {
label: 'Search the web',
}, {
separator: true,
}, {
label: 'Drive',
}, {
label: 'Photos',
}, {
label: 'By URL',
}, {
label: 'Camera',
}];<template>
<div>
<Menu :items="items"/>
</div>
</template>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent