feat(components): [menu] add persistent prop (#19874)

feat(components): [menu] add persistent prop

docs/en-US/component/menu.md

@@ -92,6 +92,7 @@ menu/popper-offset
 | background-color ^(deprecated)  | background color of Menu (hex format) (use `--el-menu-bg-color` in a style class instead)                                                                             | ^[string]                              | #ffffff  |
 | text-color ^(deprecated)        | text color of Menu (hex format) ( use `--el-menu-text-color` in a style class instead)                                                                                | ^[string]                              | #303133  |
 | active-text-color ^(deprecated) | text color of currently active menu item (hex format) ( use `--el-menu-active-color` in a style class instead)                                                        | ^[string]                              | #409eff  |
+| persistent ^(2.9.5)             | when menu inactive and `persistent` is `false` , dropdown menu will be destroyed                                                                                   | ^[boolean]                             | true     |
 
 ### Events
 

packages/components/menu/src/menu-item.vue

@@ -18,7 +18,7 @@
       :effect="rootMenu.props.popperEffect"
       placement="right"
       :fallback-placements="['left']"
-      persistent
+      :persistent="rootMenu.props.persistent"
     >
       <template #content>
         <slot name="title" />

packages/components/menu/src/menu.ts

@@ -161,6 +161,13 @@ export const menuProps = buildProps({
     type: Number,
     default: 300,
   },
+  /**
+   * @description when menu inactive and `persistent` is `false` , dropdown menu will be destroyed
+   */
+  persistent: {
+    type: Boolean,
+    default: true,
+  },
 } as const)
 export type MenuProps = ExtractPropTypes<typeof menuProps>
 

packages/components/menu/src/sub-menu.ts

@@ -184,6 +184,7 @@ export default defineComponent({
     )
 
     const mode = computed(() => rootMenu.props.mode)
+    const persistent = computed(() => rootMenu.props.persistent)
     const item = reactive({
       index: props.index,
       indexPath,
@@ -360,7 +361,7 @@ export default defineComponent({
               pure: true,
               offset: subMenuPopperOffset.value,
               showArrow: false,
-              persistent: true,
+              persistent: persistent.value,
               popperClass: subMenuPopperClass.value,
               placement: currentPlacement.value,
               teleported: appendToBody.value,