Skip to content

dove-ui/menu

This branch is 1 commit ahead of master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4460a99 · Apr 29, 2022

History

27 Commits
Jan 11, 2020
Jun 14, 2020
Jan 11, 2020
Jun 14, 2020
Jan 18, 2020
Jan 11, 2020
Jan 11, 2020
Jan 18, 2020
Jan 11, 2020
Jun 14, 2020
Jan 11, 2020
Jan 18, 2020
Apr 29, 2022

Repository files navigation

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