Implemented panel menu
parent
98a5742d63
commit
ebba7cc73c
|
@ -9,6 +9,13 @@
|
|||
<span class="p-menuitem-text">{{item.label}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<transition name="p-panelmenu-content-wrapper">
|
||||
<div class="p-panelmenu-content-wrapper" v-show="item === activeItem">
|
||||
<div class="p-panelmenu-content" v-if="item.items">
|
||||
<PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
@ -31,7 +38,26 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
onItemClick(event, item) {
|
||||
if (item.disabled) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!item.url) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (item.command) {
|
||||
item.command({
|
||||
originalEvent: event,
|
||||
item: item
|
||||
});
|
||||
}
|
||||
|
||||
if (this.activeItem && this.activeItem === item)
|
||||
this.activeItem = null;
|
||||
else
|
||||
this.activeItem = item;
|
||||
},
|
||||
getPanelClass(item) {
|
||||
return ['p-panelmenu-panel', item.class, {'p-disabled': item.disabled}];
|
||||
|
@ -119,4 +145,24 @@ export default {
|
|||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-panelmenu-content-wrapper-enter,
|
||||
.p-panelmenu-content-wrapper-leave-to {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.p-panelmenu-content-wrapper-enter-to,
|
||||
.p-panelmenu-content-wrapper-leave {
|
||||
max-height: 1000px;
|
||||
}
|
||||
|
||||
.p-panelmenu-content-wrapper-leave-active {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
|
||||
}
|
||||
|
||||
.p-panelmenu-content-wrapper-enter-active {
|
||||
overflow: hidden;
|
||||
transition: max-height 1s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,15 +1,71 @@
|
|||
<template>
|
||||
<div class="p-panelmenu-panel">
|
||||
<ul class="p-submenu-list">
|
||||
<template v-for="(item, i) of model">
|
||||
<li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i">
|
||||
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)">
|
||||
<span :class="['p-menuitem-icon', item.icon]"></span>
|
||||
<span class="p-menuitem-text">{{item.label}}</span>
|
||||
</router-link>
|
||||
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)">
|
||||
<span :class="getSubmenuIcon(item)" v-if="item.items"></span>
|
||||
<span :class="['p-menuitem-icon', item.icon]"></span>
|
||||
<span class="p-menuitem-text">{{item.label}}</span>
|
||||
</a>
|
||||
<transition name="p-panelmenu-content-wrapper">
|
||||
<div class="p-panelmenu-content-wrapper" v-show="item === activeItem">
|
||||
<sub-panelmenu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'" />
|
||||
</div>
|
||||
</transition>
|
||||
</li>
|
||||
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sub-panelmenu',
|
||||
props: {
|
||||
item: {
|
||||
model: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeItem: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onItemClick($event, item) {
|
||||
if (item.disabled) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!item.url) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (item.command) {
|
||||
item.command({
|
||||
originalEvent: event,
|
||||
item: item
|
||||
});
|
||||
}
|
||||
|
||||
if (this.activeItem && this.activeItem === item)
|
||||
this.activeItem = null;
|
||||
else
|
||||
this.activeItem = item;
|
||||
},
|
||||
getItemClass(item) {
|
||||
return ['p-menuitem', item.className, {'p-disabled': item.disabled}];
|
||||
},
|
||||
getSubmenuIcon(item) {
|
||||
const active = (item === this.activeItem);
|
||||
return ['p-panelmenu-icon pi pi-fw', {'pi-caret-right': !active, 'pi-caret-down': active}];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Loading…
Reference in New Issue