diff --git a/api-generator/components/contextmenu.js b/api-generator/components/contextmenu.js index 4717620b4..85b9f604b 100644 --- a/api-generator/components/contextmenu.js +++ b/api-generator/components/contextmenu.js @@ -28,6 +28,12 @@ const ContextMenuProps = [ type: "boolean", default: "false", description: "Attaches the menu to document instead of a particular item." + }, + { + name: "exact", + type: "boolean", + default: "true", + description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path." } ]; diff --git a/src/components/contextmenu/ContextMenu.d.ts b/src/components/contextmenu/ContextMenu.d.ts index 62effe154..1f3fff4ab 100755 --- a/src/components/contextmenu/ContextMenu.d.ts +++ b/src/components/contextmenu/ContextMenu.d.ts @@ -6,6 +6,7 @@ interface ContextMenuProps { autoZIndex?: boolean; baseZIndex?: number; global?: boolean; + exact?: boolean; } declare class ContextMenu { diff --git a/src/components/contextmenu/ContextMenu.vue b/src/components/contextmenu/ContextMenu.vue index d2fa14089..26da5f3a8 100755 --- a/src/components/contextmenu/ContextMenu.vue +++ b/src/components/contextmenu/ContextMenu.vue @@ -2,7 +2,7 @@
- +
@@ -35,6 +35,10 @@ export default { global: { type: Boolean, default: false + }, + exact: { + type: Boolean, + default: true } }, target: null, diff --git a/src/components/contextmenu/ContextMenuSub.vue b/src/components/contextmenu/ContextMenuSub.vue index 156d989f0..7fe17c960 100755 --- a/src/components/contextmenu/ContextMenuSub.vue +++ b/src/components/contextmenu/ContextMenuSub.vue @@ -5,13 +5,13 @@
  • + @leaf-click="onLeafClick" :parentActive="item === activeItem" :exact="exact" />
  • @@ -51,6 +51,10 @@ export default { template: { type: Object, default: null + }, + exact: { + type: Boolean, + default: true } }, watch: { @@ -132,8 +136,12 @@ export default { } ] }, - getLinkClass(item) { - return ['p-menuitem-link', {'p-disabled': this.disabled(item)}]; + linkClass(item, routerProps) { + return ['p-menuitem-link', { + 'p-disabled': this.disabled(item), + 'router-link-active': routerProps && routerProps.isActive, + 'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive + }]; }, visible(item) { return (typeof item.visible === 'function' ? item.visible() : item.visible !== false); diff --git a/src/views/contextmenu/ContextMenuDoc.vue b/src/views/contextmenu/ContextMenuDoc.vue index 4fb816589..100063e7d 100755 --- a/src/views/contextmenu/ContextMenuDoc.vue +++ b/src/views/contextmenu/ContextMenuDoc.vue @@ -194,6 +194,18 @@ export default { </template> </ContextMenu> + + +

    router-link with route configuration can also be used within templating for further customization.

    +
    
     
    Properties
    @@ -238,6 +250,12 @@ export default { boolean false Attaches the menu to document instead of a particular item. + + + exact + boolean + true + Whether to apply 'router-link-active-exact' class if route exactly matches the item path.