From 74833b49bcaabc47e97ad9ef6a85a8c18ef1df76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=81=87=E8=A7=81=E5=90=8C=E5=AD=A6?= <1875694521@qq.com>
Date: Wed, 23 Jul 2025 18:21:16 +0800
Subject: [PATCH] fix(components): [menu] hide arrow right padding incorrect
 (#21292)

* fix(components): [menu] Hide Arrow Padding Right Value

* fix(components): [menu] Hide Arrow Padding Right Value

* feat: Hide Arrow Padding Right Value

* feat: dynamically calcMoreButtonWidth

* Revert "feat: dynamically calcMoreButtonWidth"

This reverts commit b46953e3338bf4a59141fdbf7207a1abeee82b82.

* chore: dynamic solution

* chore: fix

* Update packages/theme-chalk/src/menu.scss

---------

Co-authored-by: Dsaquel <291874700n@gmail.com>
Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
---
 packages/components/menu/src/menu.ts | 8 ++++++--
 packages/theme-chalk/src/menu.scss   | 4 ++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/components/menu/src/menu.ts b/packages/components/menu/src/menu.ts
index e28c10cd4c..606120fb1c 100644
--- a/packages/components/menu/src/menu.ts
+++ b/packages/components/menu/src/menu.ts
@@ -12,7 +12,7 @@ import {
   watchEffect,
   withDirectives,
 } from 'vue'
-import { useResizeObserver } from '@vueuse/core'
+import { unrefElement, useResizeObserver } from '@vueuse/core'
 import { isNil } from 'lodash-unified'
 import ElIcon from '@element-plus/components/icon'
 import { More } from '@element-plus/icons-vue'
@@ -207,8 +207,10 @@ export default defineComponent({
     const instance = getCurrentInstance()!
     const router = instance.appContext.config.globalProperties.$router as Router
     const menu = ref<HTMLUListElement>()
+    const subMenu = ref<HTMLElement>()
     const nsMenu = useNamespace('menu')
     const nsSubMenu = useNamespace('sub-menu')
+    let moreItemWidth = 64
 
     // data
     const sliceIndex = ref(-1)
@@ -328,7 +330,6 @@ export default defineComponent({
       const items = Array.from(menu.value?.childNodes ?? []).filter(
         (item) => item.nodeName !== '#text' || item.nodeValue
       ) as HTMLElement[]
-      const moreItemWidth = 64
       const computedMenuStyle = getComputedStyle(menu.value!)
       const paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10)
       const paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10)
@@ -360,6 +361,8 @@ export default defineComponent({
 
     let isFirstTimeRender = true
     const handleResize = () => {
+      const el = unrefElement(subMenu)
+      if (el) moreItemWidth = calcMenuItemWidth(el) || 64
       if (sliceIndex.value === calcSliceIndex()) return
       const callback = () => {
         sliceIndex.value = -1
@@ -490,6 +493,7 @@ export default defineComponent({
             h(
               ElSubMenu,
               {
+                ref: subMenu,
                 index: 'sub-menu-more',
                 class: nsSubMenu.e('hide-arrow'),
                 popperOffset: props.popperOffset,
diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss
index 561ef3b80f..57c50a4073 100644
--- a/packages/theme-chalk/src/menu.scss
+++ b/packages/theme-chalk/src/menu.scss
@@ -298,6 +298,10 @@
     line-height: getCssVar('menu-sub-item-height');
   }
 
+  &.#{$namespace}-sub-menu__hide-arrow .#{$namespace}-sub-menu__title {
+    padding-right: getCssVar('menu-base-level-padding');
+  }
+
   @include e(hide-arrow) {
     .#{$namespace}-sub-menu__icon-arrow {
       display: none !important;