fix: menu hover color not change when background is changed (#2417)

packages/menu/__tests__/menu.spec.ts

@@ -150,6 +150,30 @@ describe('menu', () => {
     const instance = elSubmenu.vm as any
     expect(instance.opened).toBeTruthy()
   })
+  test('hover-background-color', async () => {
+    const wrapper = _mount(
+      `<el-menu ref="menu" default-active="2"
+        :background-color="background"
+        text-color="#000"
+        active-text-color="#0f0">
+        <el-menu-item index="1" ref="item1">处理中心</el-menu-item>
+        <el-menu-item index="2" ref="item2">订单管理</el-menu-item>
+      </el-menu>`,
+      {
+        data() {
+          return {
+            background: '#008C74',
+          }
+        },
+      },
+    )
+    await nextTick()
+    const vm = (wrapper.vm as any)
+    expect(vm.$refs.menu.hoverBackground).toEqual('rgb(0, 112, 93)')
+    vm.background = '#F00'
+    await nextTick()
+    expect(vm.$refs.menu.hoverBackground).toEqual('rgb(204, 0, 0)')
+  })
 })
 
 describe('default active', () => {

packages/menu/src/menu.vue

@@ -98,7 +98,7 @@ export default defineComponent({
     const rootMenuEmitter = mitt()
     const router = instance.appContext.config.globalProperties.$router
 
-    const hoverBackground = useMenuColor(props.backgroundColor)
+    const hoverBackground = useMenuColor(props)
 
     // computed
     const isMenuPopup = computed(() => {

packages/menu/src/useMenuColor.ts

@@ -1,7 +1,15 @@
-import { ref } from 'vue'
+import { computed } from 'vue'
+import type { IMenuProps } from './menu'
 
-export default function useMenuColor(color = '') {
+export default function useMenuColor(props: IMenuProps) {
-  const menuBarColor = ref('')
+  const menuBarColor = computed(() => {
+    const color = props.backgroundColor
+    if (!color) {
+      return ''
+    } else {
+      return mixColor(color)
+    }
+  })
   function calcColorChannels(c: string) {
     let rawColor = c.replace('#', '')
     if (/^[0-9a-fA-F]{3}$/.test(rawColor)) {
@@ -40,9 +48,5 @@ export default function useMenuColor(color = '') {
     }
     return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`
   }
-  if (!color) {
-    return menuBarColor
-  }
-  menuBarColor.value = mixColor(color)
   return menuBarColor
 }