diff --git a/api-generator/components/megamenu.js b/api-generator/components/megamenu.js index 90d0b90e4..0a87a5623 100644 --- a/api-generator/components/megamenu.js +++ b/api-generator/components/megamenu.js @@ -10,6 +10,12 @@ const MegaMenuProps = [ type: "string", default: "horizontal", description: "Defines the orientation, valid values are horizontal and vertical." + }, + { + 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/megamenu/MegaMenu.d.ts b/src/components/megamenu/MegaMenu.d.ts index 571ef5be2..987f7d000 100755 --- a/src/components/megamenu/MegaMenu.d.ts +++ b/src/components/megamenu/MegaMenu.d.ts @@ -3,6 +3,7 @@ import { VNode } from 'vue'; interface MegaMenuProps { model?: any[]; orientation?: string; + exact?: boolean; } declare class MegaMenu { diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue index b3b584251..2139a118d 100755 --- a/src/components/megamenu/MegaMenu.vue +++ b/src/components/megamenu/MegaMenu.vue @@ -5,13 +5,13 @@
router-link with route configuration can also be used within templating for further customization.
+
+<MegaMenu :model="items">
+ <template #item="{item}">
+ <router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}">
+ <a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}>{{route.fullPath}}</a>
+ </router-link>
+ </template>
+</MegaMenu>
+