update element-plus@1.1.0-beta.6

src/layout/components/sidebar/SidebarItem.vue

@@ -20,7 +20,7 @@
       </app-link>
     </template>
 
-    <el-submenu
+    <el-sub-menu
       v-else
       ref="subMenu"
       :index="resolvePath(item.path)"
@@ -38,7 +38,7 @@
         :base-path="resolvePath(child.path)"
         class="nest-menu"
       />
-    </el-submenu>
+    </el-sub-menu>
   </div>
 </template>
 

src/main.ts

@@ -6,7 +6,7 @@ import { setupStore } from "/@/store";
 import { useElementPlus } from "../src/plugins/element-plus";
 import { useTable } from "../src/plugins/vxe-table";
 import { usI18n } from "../src/plugins/i18n";
-
+import "element-plus/dist/index.css";
 // 导入公共样式
 import "./style/index.scss";
 // 导入字体图标

src/plugins/element-plus/index.ts

@@ -5,7 +5,7 @@ import {
   ElBreadcrumb,
   ElBreadcrumbItem,
   ElScrollbar,
-  ElSubmenu,
+  ElSubMenu,
   ElButton,
   ElCol,
   ElRow,
@@ -32,7 +32,6 @@ import {
   ElRadioButton,
   ElRadioGroup
 } from "element-plus";
-import "element-plus/packages/theme-chalk/src/base.scss";
 
 const components = [
   ElAffix,
@@ -40,7 +39,7 @@ const components = [
   ElBreadcrumb,
   ElBreadcrumbItem,
   ElScrollbar,
-  ElSubmenu,
+  ElSubMenu,
   ElButton,
   ElCol,
   ElRow,

src/style/sidebar.scss

@@ -77,7 +77,7 @@
     }
 
     .el-menu-item,
-    .el-submenu__title {
+    .el-sub-menu__title {
       color: $menuText;
     }
 
@@ -87,14 +87,14 @@
 
     // menu hover
     .submenu-title-noDropdown,
-    .el-submenu__title {
+    .el-sub-menu__title {
       &:hover {
         background-color: $menuHover !important;
       }
       background: $menuBg;
     }
 
-    .is-active > .el-submenu__title,
+    .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;
       i {
@@ -107,8 +107,8 @@
       color: $subMenuActiveText !important;
     }
 
-    & .nest-menu .el-submenu > .el-submenu__title,
-    & .el-submenu .el-menu-item {
+    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .el-sub-menu .el-menu-item {
       font-size: 12px;
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
@@ -137,10 +137,10 @@
       }
     }
 
-    .el-submenu {
+    .el-sub-menu {
       overflow: hidden;
-      & > .el-submenu__title {
-        .el-submenu__icon-arrow {
+      & > .el-sub-menu__title {
+        .el-sub-menu__icon-arrow {
           display: none;
         }
       }
@@ -148,8 +148,8 @@
 
     .el-menu--collapse {
       margin-left: -5px; //需优化的地方
-      .el-submenu {
-        & > .el-submenu__title {
+      .el-sub-menu {
+        & > .el-sub-menu__title {
           & > span {
             height: 0;
             width: 0;
@@ -173,7 +173,7 @@
           background-color: $subMenuHover;
         }
       }
-      .el-submenu__title {
+      .el-sub-menu__title {
         color: $menuText;
       }
     }
@@ -183,7 +183,7 @@
       }
     }
 
-    .is-active > .el-submenu__title,
+    .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: $subMenuActiveText !important;
       i {
@@ -196,7 +196,7 @@
       color: $subMenuActiveText !important;
     }
 
-    .nest-menu .el-submenu > .el-submenu__title,
+    .nest-menu .el-sub-menu > .el-sub-menu__title,
     .el-menu-item {
       &:hover {
         // you can use $subMenuHover
@@ -210,7 +210,7 @@
     height: 100%;
   }
 
-  .el-menu--collapse .el-menu .el-submenu {
+  .el-menu--collapse .el-menu .el-sub-menu {
     min-width: $sideBarWidth !important;
   }