vue2-submenu v1.0.10

vue2-submenu

A Vue.js project

Use

Install

# npm i vue2-submenu --save

Use

1.import style

import 'vue2-submenu/dist/static/css/vue2-submenu.css'

2.import component

import Vue2Submenu from 'vue2-submenu/dist/vue2-submenu'

3.use component

<vue2-submenu
    class="m-auto"
    :menus="menus"
    submenuPos="right"
    @onItemMouseOver="handleItemMouseOver"
    @onSelect="handleItemSelect" />

4.Props

4.1.menus

menus: [{
    label: 'txt',
    list: [{txt: '1-1'}, {txt: '1-2'}, {txt: '1-3'}, {txt: '1-4'}, {txt: '1-5'}, {txt: '1-6'}]
}, {
    label: 'label',
    list: [{label: '2-12-12-12-12-12-12-12-1'}, {label: '2-22-22-22-22-22-22-22-22-22-22-22-22-22-22-22-22-22-22-22-22-2'}, {label: '2-3'}, {label: '2-4'}, {label: '2-5'}]
}, {
    label: 'name',
    list: [{name: '3-1'}, {name: '3-2'}, {name: '3-3'}, {name: '3-4'}, {name: '3-5'}]
}]

4.2.submenuPos('left'|'right')

submenuPos="right"

4.3.triggerBtnTxt

triggerBtnTxt="button text"

4.4.menuItemHeight

menuItemHeight="30"

5.Events

5.1.onItemMouseOver

return value:

{
  menuIndex: menuIndex,
  menuItemIndex: menuItemIndex,
  menuItem: menuItem
}

5.2. onSelect

return value:

{
  menuIndex: menuIndex,
  menuItem: menuItem
}

Style Override

1. override box

.parent-class /deep/ .v-submenu-box {...}

2. override button

.parent-class /deep/ .v-submenu-trigger {...}

3. override menu

.parent-class /deep/ .v-submenu {...}

4. override menu scroll

.parent-class /deep/ .v-submenu::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px rgba(#000, 1) inset
}
.parent-class /deep/ .v-submenu::-webkit-scrollbar-thumb {
  box-shadow: 0 0 0 5px rgba(#fff, 1) inset
}

5. override menu item

.parent-class /deep/ .v-submenu-item {...}

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.