vue2-submenu
> A Vue.js project
Use
$3
``
bash
npm i vue2-submenu --save
`
$3
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
`
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
}
`
$3
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
`
bash
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.