Menu: In vertical mode, the background color of the active menu is configurable

examples/docs/en-US/menu.md

@@ -73,7 +73,7 @@ Top bar NavMenu can be used in a variety of scenarios.
 
 Vertical NavMenu with sub-menus.
 
-:::demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
+:::demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot. In addition, when the navigation menu is in vertical mode, the Menu also provides an additional `active-background-color` attribute to set the background color of the current active menu.
 ```html
 <el-row class="tac">
   <el-col :span="12">
@@ -123,7 +123,8 @@ Vertical NavMenu with sub-menus.
       @close="handleClose"
       background-color="#545c64"
       text-color="#fff"
-      active-text-color="#ffd04b">
+      active-text-color="#ffd04b"
+      active-background-color="#646857">
       <el-submenu index="1">
         <template slot="title">
           <i class="el-icon-location"></i>
@@ -248,6 +249,7 @@ Vertical NavMenu could be collapsed.
 | mode     | menu display mode   | string  |   horizontal / vertical   | vertical |
 | collapse  | whether the menu is collapsed (available only in vertical mode) | boolean  |   —   | false |
 | background-color  | background color of Menu (hex format) | string |   —   | #ffffff |
+| active-background-color  | background color of currently active menu item. If not set, the background color will be used. (valid only when mode is vertical and hex format) | string |   —   | #ffffff |
 | text-color  | text color of Menu (hex format) | string |   —   | #303133 |
 | active-text-color  | text color of currently active menu item (hex format) | string |   —   | #409EFF |
 | default-active | index of currently active menu | string    | — | — |

examples/docs/es/menu.md

@@ -6,7 +6,7 @@ Menú que provee la navegación para tu sitio.
 
 Top bar NavMenu puede ser usado en distinto escenarios.
 
-:::demo Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores.
+:::demo Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores. In addition, when the navigation menu is in vertical mode, the Menu also provides an additional `active-background-color` attribute to set the background color of the current active menu.
 
 ```html
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
@@ -125,7 +125,8 @@ NavMenu vertical con sub-menús.
       @close="handleClose"
       background-color="#545c64"
       text-color="#fff"
-      active-text-color="#ffd04b">
+      active-text-color="#ffd04b"
+      active-background-color="#646857">
       <el-submenu index="1">
         <template slot="title">
           <i class="el-icon-location"></i>
@@ -250,6 +251,7 @@ NavMenu vertical puede ser colapsado.
 | mode              | modo de presentación del menú            | string  | horizontal / vertical | vertical    |
 | collapse          | si el menú está colapsado (solo en modo vertical) | boolean | —                     | false       |
 | background-color  | color de fondo del menú (formato hexadecimal) | string  | —                     | #ffffff     |
+| active-background-color  | background color of currently active menu item. If not set, the background color will be used. (valid only when mode is vertical and hex format) | string |   —   | #ffffff |
 | text-color        | color de texto del menú (formato hexadecimal) | string  | —                     | #303133     |
 | active-text-color | color del texto del menu-item activo (formato hexadecimal) | string  | —                     | #409EFF     |
 | default-active    | índice del menu-item activo              | string  | —                     | —           |

examples/docs/fr-FR/menu.md

@@ -73,7 +73,7 @@ La barre du haut peut être utilisée pour différents scénarios.
 
 Menu vertical avec sous-menus.
 
-:::demo Vous pouvez utiliser le composant el-menu-item-group pour créer un groupe dans le menu dont le nom sera déterminé par celui de la propriété title ou d'un slot.
+:::demo Vous pouvez utiliser le composant el-menu-item-group pour créer un groupe dans le menu dont le nom sera déterminé par celui de la propriété title ou d'un slot. En outre, lorsque le Menu de navigation est en mode vertical, le menu fournit en outre l'attribut `active-background-color` pour définir la couleur de fond du menu actuellement actif.
 ```html
 <el-row class="tac">
   <el-col :span="12">
@@ -123,7 +123,8 @@ Menu vertical avec sous-menus.
       @close="handleClose"
       background-color="#545c64"
       text-color="#fff"
-      active-text-color="#ffd04b">
+      active-text-color="#ffd04b"
+      active-background-color="#646857">
       <el-submenu index="1">
         <template slot="title">
           <i class="el-icon-location"></i>
@@ -249,6 +250,7 @@ Le menu vertical peut être réduit.
 | mode     | Mode d'affichage du menu.   | string  |   horizontal / vertical   | vertical |
 | collapse  | Si le menu peut être réduit, uniquement disponible en mode vertical. | boolean  |   —   | false |
 | background-color  | Couleur de fond du menu (format hexadécimal). | string |   —   | #ffffff |
+| active-background-color  | Couleur de fond de l'item actif, Utiliser la couleur de fond si elle n'est pas définie (valable uniquement lorsque le mode est vertical et ne supporte que le format Hex) | string |   —   | #ffffff |
 | text-color  | Couleur du texte du menu (format hexadécimal) | string |   —   | #303133 |
 | active-text-color  | Couleur du texte de l'item actif (format hexadécimal). | string |   —   | #409EFF |
 | default-active | Index du menu actif. | string    | — | — |

examples/docs/zh-CN/menu.md

@@ -74,7 +74,7 @@
 
 垂直菜单，可内嵌子菜单。
 
-:::demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。
+:::demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。另外，导航菜单为垂直模式时，Menu 还额外提供了 `active-background-color` 属性，用来设置当前激活菜单的背景颜色
 ```html
 <el-row class="tac">
   <el-col :span="12">
@@ -125,7 +125,8 @@
       @close="handleClose"
       background-color="#545c64"
       text-color="#fff"
-      active-text-color="#ffd04b">
+      active-text-color="#ffd04b"
+      active-background-color="#646857">
       <el-submenu index="1">
         <template slot="title">
           <i class="el-icon-location"></i>
@@ -249,6 +250,7 @@
 | mode     | 模式   | string  |   horizontal / vertical   | vertical |
 | collapse  | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean  |   —   | false |
 | background-color  | 菜单的背景色（仅支持 hex 格式） | string |   —   | #ffffff |
+| active-background-color  | 当前激活菜单的背景色，未设置则使用背景色（只在 mode 为 vertical 时有效，且仅支持 hex 格式） | string |   —   | #ffffff |
 | text-color  | 菜单的文字颜色（仅支持 hex 格式） | string |   —   | #303133 |
 | active-text-color  | 当前激活菜单的文字颜色（仅支持 hex 格式） | string |   —   | #409EFF |
 | default-active | 当前激活菜单的 index | string    | — | — |

packages/menu/src/menu-item.vue

@@ -55,10 +55,12 @@
         return this.index === this.rootMenu.activeIndex;
       },
       hoverBackground() {
+        if (this.active && this.mode !== 'horizontal') return this.rootMenu.activeBackgroundColor || this.rootMenu.hoverBackground;
         return this.rootMenu.hoverBackground;
       },
       backgroundColor() {
-        return this.rootMenu.backgroundColor || '';
+        if (this.mode === 'horizontal') return this.rootMenu.backgroundColor || '';
+        return (this.active ? (this.rootMenu.activeBackgroundColor || this.rootMenu.backgroundColor) : this.rootMenu.backgroundColor) || '';
       },
       activeTextColor() {
         return this.rootMenu.activeTextColor || '';

packages/menu/src/menu.vue

@@ -117,6 +117,7 @@
       backgroundColor: String,
       textColor: String,
       activeTextColor: String,
+      activeBackgroundColor: String,
       collapseTransition: {
         type: Boolean,
         default: true

types/menu.d.ts

@@ -20,6 +20,9 @@ export declare class ElMenu extends ElementUIComponent {
   /** Text color of currently active menu item (hex format) */
   activeTextColor: string
 
+  /** Background color of currently active menu item (hex format) */
+  activeBackgroundColor: string
+
   /** Index of currently active menu */
   defaultActive: string