Refactored and applied fixes to Menu component
cagataycivici
parent
f77e0f76fe
commit
38a411e2e9
|
|
@ -3,8 +3,8 @@
|
|||
<div ref="container" :class="containerClass" v-if="popup ? visible : true">
|
||||
<ul class="p-menu-list p-reset" role="menu">
|
||||
<template v-for="(item, i) of model">
|
||||
<template v-if="item.items">
|
||||
<li class="p-submenu-header " :key="item.label+i" v-if="item.items">{{item.label}}</li>
|
||||
<template v-if="item.items && item.visible !== false">
|
||||
<li class="p-submenu-header" :key="item.label+i" v-if="item.items">{{item.label}}</li>
|
||||
<Menuitem v-for="(child, j) of item.items" :key="child.label+i+j" :item="child" @click="itemClick" />
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -41,7 +41,7 @@ export default {
|
|||
baseZIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -54,9 +54,7 @@ export default {
|
|||
beforeDestroy() {
|
||||
this.restoreAppend();
|
||||
this.unbindResizeListener();
|
||||
if (this.dismissable) {
|
||||
this.unbindOutsideClickListener();
|
||||
}
|
||||
this.target = null;
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -64,8 +62,9 @@ export default {
|
|||
const item = event.item;
|
||||
if (item.command) {
|
||||
item.command(event);
|
||||
event.originalEvent.preventDefault();
|
||||
}
|
||||
this.overlayVisible = false;
|
||||
this.hide();
|
||||
},
|
||||
toggle(event) {
|
||||
if (this.visible)
|
||||
|
|
@ -96,16 +95,12 @@ export default {
|
|||
},
|
||||
alignOverlay() {
|
||||
DomHandler.absolutePosition(this.$refs.container, this.target);
|
||||
|
||||
if (DomHandler.getOffset(this.$refs.container).top < DomHandler.getOffset(this.target).top) {
|
||||
DomHandler.addClass(this.$refs.container, 'p-overlaypanel-flipped');
|
||||
}
|
||||
},
|
||||
bindOutsideClickListener() {
|
||||
if (!this.outsideClickListener) {
|
||||
this.outsideClickListener = (event) => {
|
||||
if (this.visible && this.$refs.container && !this.$refs.container.contains(event.target) && !this.isTargetClicked(event)) {
|
||||
this.visible = false;
|
||||
this.hide();
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', this.outsideClickListener);
|
||||
|
|
@ -121,7 +116,7 @@ export default {
|
|||
if (!this.resizeListener) {
|
||||
this.resizeListener = () => {
|
||||
if (this.visible) {
|
||||
this.visible = false;
|
||||
this.hide();
|
||||
}
|
||||
};
|
||||
window.addEventListener('resize', this.resizeListener);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
<template>
|
||||
<li :class="containerClass" role="menuitem" :style="item.style">
|
||||
<a :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
|
||||
<li :class="containerClass" role="menuitem" :style="item.style" v-if="item.visible !== false">
|
||||
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
|
||||
<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" @click="onClick" :target="item.target">
|
||||
<span :class="['p-menuitem-icon', item.icon]"></span>
|
||||
<span class="p-menuitem-text">{{item.label}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -18,7 +22,6 @@ export default {
|
|||
originalEvent: event,
|
||||
item: this.item
|
||||
});
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -49,16 +49,12 @@ export default {
|
|||
items: [{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/'
|
||||
}
|
||||
url: 'https://vuejs.org/'
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
label: 'Router',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
window.location.hash = "/fileupload"
|
||||
}
|
||||
to: '/fileupload'
|
||||
}
|
||||
]}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -35,16 +35,12 @@ export default {
|
|||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/'
|
||||
}
|
||||
url: 'https://vuejs.org/'
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
label: 'Router',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
window.location.hash = "/fileupload"
|
||||
}
|
||||
to: '/fileupload'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -58,18 +54,18 @@ export default {
|
|||
<h3>SubMenus</h3>
|
||||
<p>Menu supports one level of nesting via subitems of an item.</p>
|
||||
<CodeHighlight lang="js">
|
||||
let items: [
|
||||
const items: [
|
||||
{
|
||||
label: 'Options',
|
||||
items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
|
||||
items: [{label: 'New', icon: 'pi pi-fw pi-plus', command:() => {} },
|
||||
{label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
|
||||
},
|
||||
{
|
||||
label: 'Account',
|
||||
items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
|
||||
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
|
||||
items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
|
||||
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
|
||||
}
|
||||
]
|
||||
];
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Popup Mode</h3>
|
||||
|
|
@ -78,6 +74,12 @@ let items: [
|
|||
<CodeHighlight>
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
<Menu ref="menu" :model="items" :popup="true" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
toggle(event) {
|
||||
this.$refs.menu.toggle(event);
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -239,16 +241,12 @@ export default {
|
|||
items: [{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/'
|
||||
}
|
||||
url: 'https://vuejs.org/'
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
label: 'Router',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
window.location.hash = "/fileupload"
|
||||
}
|
||||
to: '/fileupload'
|
||||
}
|
||||
]}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -14,15 +14,15 @@
|
|||
const items: [
|
||||
{
|
||||
label: 'Options',
|
||||
items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
|
||||
items: [{label: 'New', icon: 'pi pi-fw pi-plus', command:() => {} },
|
||||
{label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
|
||||
},
|
||||
{
|
||||
label: 'Account',
|
||||
items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
|
||||
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
|
||||
items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
|
||||
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
|
||||
}
|
||||
]
|
||||
];
|
||||
</CodeHighlight>
|
||||
|
||||
<p>MenuItem provides the following properties. Note that not all of them may be utilized by the corresponding menu component.</p>
|
||||
|
|
@ -50,6 +50,12 @@ const items: [
|
|||
<td>null</td>
|
||||
<td>Icon of the item.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>to</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Path of the route.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>command</td>
|
||||
<td>function</td>
|
||||
|
|
@ -118,20 +124,18 @@ const items = [
|
|||
</CodeHighlight>
|
||||
|
||||
<h3>Navigation</h3>
|
||||
<p>Navigation is specified using url property for external links or using command function for internal router.</p>
|
||||
<p>Navigation is specified using <i>url</i> property for external links or using <i>to</i> property for internal routing.</p>
|
||||
<CodeHighlight lang="js">
|
||||
const items = [
|
||||
{
|
||||
label: 'New',
|
||||
label: 'Internal',
|
||||
icon: 'pi pi-plus',
|
||||
command: (event) => {
|
||||
window.location.hash = "/fileupload";
|
||||
}
|
||||
to: '/fileupload'
|
||||
},
|
||||
{
|
||||
label: 'Link',
|
||||
label: 'External',
|
||||
icon: 'pi pi-check',
|
||||
url: 'https://www.primefaces.org/primereact'
|
||||
url: 'https://www.primefaces.org/primevue'
|
||||
}
|
||||
];
|
||||
</CodeHighlight>
|
||||
|
|
|
|||
Loading…
Reference in New Issue