导航栏

src/layout/components/Sidebar/index.vue

@@ -2,8 +2,23 @@
   <div :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu class="navMenu" :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menusBg" :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
-        <sidebar-item v-for="(route, index) in permission_routes" :key="index" :item="route" :base-path="route.path" />
+      <el-menu
+        class="navMenu"
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :background-color="variables.menusBg"
+        :text-color="variables.menuText"
+        :unique-opened="false"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item
+          v-for="(route, index) in permission_routes"
+          :key="index"
+          :item="route"
+          :base-path="route.path"
+        />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -19,8 +34,11 @@ export default {
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters(["sidebar", "permission_routes"]),
-    routes () {
-      const power = typeof this.userPowerList == 'string' ? JSON.parse(this.userPowerList) : this.userPowerList;
+    routes() {
+      const power =
+        typeof this.userPowerList == "string"
+          ? JSON.parse(this.userPowerList)
+          : this.userPowerList;
       return power;
       // const datas = this.$router.options.routes;
       // const arrs = [];
@@ -43,7 +61,7 @@ export default {
       //   return datas;
       // }
     },
-    activeMenu () {
+    activeMenu() {
       const route = this.$route;
       const { meta, path } = route;
       // if set path, the sidebar will highlight the path you set
@@ -52,13 +70,13 @@ export default {
       }
       return path;
     },
-    showLogo () {
+    showLogo() {
       return this.$store.state.settings.sidebarLogo;
     },
-    variables () {
+    variables() {
       return variables;
     },
-    isCollapse () {
+    isCollapse() {
       return !this.sidebar.opened;
     },
   },

src/layout/index.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="app-wrapper">
-    <sidebar class="sidebar-container" style="width: 88px" />
+  <div class="app-wrapper" @change="eveclk">
+    <sidebar
+      class="sidebar-container"
+      id="sidebar-container"
+      style="width: 88px"
+      @mouseover.native="eveclk"
+      @mouseleave.native="upLeft"
+    />
     <div class="main-container">
       <navbar />
-      <app-main />
+      <app-main id="main-containers" />
     </div>
     <!--修改密码弹框-->
     <Dialog width="496px" customClass="dataStoreInfoDialog" :flag="pwdflag">
@@ -95,6 +101,7 @@ export default {
         new: "",
         again: "",
       },
+      left: "0%",
       dataRules: {
         //数据项表单验证
         old: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
@@ -109,6 +116,14 @@ export default {
     ...mapGetters(["pwdflag", "outflag", "name"]),
   },
   methods: {
+    eveclk() {
+      document.getElementById("sidebar-container").style.left = "0%";
+      // document.getElementById("main-containers").style.paddingLeft = "50px";
+    },
+    upLeft() {
+      document.getElementById("sidebar-container").style.left = "-2.5%";
+      // document.getElementById("main-containers").style.paddingLeft = "30px";
+    },
     //存储数据项-提交
     addSubmit(formName) {
       this.$refs[formName].validate((valid) => {