Menu

A menu component for vue.

import VcMenu from '@dove-ui/menu'
import '@dove-ui/menu/dist/index.css'

Vue.use(VcMenu) // VcMenu

<vc-menu :menus="menus" theme="dark"></vc-menu>

Menu Attributes

| Attribute | Description | Type | Accepted Values | Default | |----------------|--------------------|-------------------------|-----------------|---------| | menus | Menus object | MenuItem[] | — | — | | theme | Menu theme | string | dark/light | — | | current-active | Selected items | any[] | — | [] | | multiple | Multiple selection | boolean | true/false | false | | render-item | Custom item render | function | — | — | | open-active | Auto open selected | function | true/false | — |

Menu Events

| Name | Description | Values | |----------|--------------------|-----------------------| | selected | Selected item | MenuItem | | open | Open submenu item | MenuItem | | close | Close submenu item | MenuItem |

Menu Slot-scopes

| Name | Description | Values | |------|--------------------|-----------------------| | item | Custom item render | MenuItem |

Custom item render

 <vc-menu :menus="menus" :current-active="['item4']" theme="dark">
  <!-- before vue 2.6.0
  <template slot-scope="menu" slot="item">
    <img :src="logo" alt="" style="vertical-align:middle;width:12px;margin-right:5px;">
    <span>{{menu.label}}</span>
  </template> -->

  <!-- vue 2.6.0+ -->
  <template v-slot:item="menu">
    <img :src="logo" alt="" style="vertical-align:middle;width:12px;margin-right:5px;">
    <span>{{menu.label}}</span>
    <span style="font-size: 12px;margin-left:10px;opacity:0.5;">{{menu.description}}</span>
  </template>
</vc-menu>

MenuItem

| Type | Attribute | Description | |-----------------|------------------|----------------------------| | string/function | menus[].label | item label | | MenuItem[] | menus[].children | submen | | boolean | menus[].group | item is group | | boolean | menus[].open | open submenu | | string | menus[].name | unique item name | | string/object | menus[].router | router-link#to | | function | menus[].hanlde | item click handle function | | string | menus[].link | link url | | string | menus[].target | link tergat | | string | menus[].title | title | | string | menus[].type | line Divider line | | string | menus[].hide | hidden item |