From 1377b63c0cb48ddf63c5739a49d376777f1d1852 Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Mon, 8 May 2023 09:48:13 +0800
Subject: [PATCH] =?UTF-8?q?improve:=20=E4=BC=98=E5=8C=96=E5=9C=86=E8=A7=92?=
 =?UTF-8?q?=E5=8F=8A=E8=A7=86=E5=8F=A3=E7=BC=A9=E5=B0=8F=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=8F=8A=E5=88=B7=E6=96=B0=E6=BB=9A=E5=8A=A8=E6=8C=87=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layout/component/transverseAside.vue  | 51 +++++++++++++++++--
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/template/admin/src/layout/component/transverseAside.vue b/template/admin/src/layout/component/transverseAside.vue
index 5e4cce5db..0bc1b2bff 100644
--- a/template/admin/src/layout/component/transverseAside.vue
+++ b/template/admin/src/layout/component/transverseAside.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="layout-columns-tra-aside">
-    <el-scrollbar>
+  <div class="layout-columns-tra-aside el-menu-horizontal-warp">
+    <el-scrollbar ref="elMenuHorizontalScrollRef" @wheel.native.prevent="onElMenuHorizontalScroll">
       <ul>
         <li
           v-for="(v, k) in columnsAsideList"
@@ -80,8 +80,25 @@ export default {
       this.setFilterRoutes();
     });
     this.setFilterRoutes();
+    this.$nextTick((e) => {
+      this.initElMenuOffsetLeft();
+    });
   },
   methods: {
+    // 设置横向滚动条可以鼠标滚轮滚动
+    onElMenuHorizontalScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40;
+      this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft =
+        this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft + eventDelta / 4;
+    },
+    // 初始化数据，页面刷新时，滚动条滚动到对应位置
+    initElMenuOffsetLeft() {
+      this.$nextTick(() => {
+        let els = document.querySelector('.layout-columns.layout-columns-active');
+        if (!els) return false;
+        this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft = els.offsetLeft;
+      });
+    },
     // 设置菜单高亮位置移动
     setColumnsAsideMove(k) {
       if (k === undefined) return false;
@@ -199,12 +216,34 @@ export default {
 </script>
 
 <style scoped lang="scss">
+/deep/ .el-scrollbar__bar.is-horizontal {
+  height: 0;
+}
+.el-menu-horizontal-warp {
+  ::v-deep .el-scrollbar__bar.is-vertical {
+    display: none;
+  }
+  ::v-deep .el-scrollbar__wrap {
+    overflow-y: hidden !important;
+    overflow-x: scroll !important;
+  }
+  ::v-deep a {
+    width: 100%;
+  }
+  .el-menu.el-menu--horizontal {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+
 .layout-columns-tra-aside {
-  //   width: 70px;
   height: 100%;
   background: var(--prev-bg-columnsMenuBar);
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   overflow-y: hidden;
+  // flex: 1;
   ul {
     position: relative;
     display: flex;
@@ -226,7 +265,7 @@ export default {
       .columns-horizontal {
         display: flex;
         height: 50px;
-        width: 100%;
+        width: 80px;
         align-items: center;
         justify-content: center;
         padding: 0 5px;
@@ -257,8 +296,9 @@ export default {
       background: var(--prev-color-primary);
       position: absolute;
       left: 0;
-      height: 50px;
+      height: 40px;
       width: 80px;
+      margin-top: 5px;
       transform: translatey(0%);
       z-index: 0;
       transition: 0.3s ease-in-out;
@@ -270,6 +310,7 @@ export default {
       height: 50px;
       width: 80px;
       border-radius: 0;
+      margin-top: 0px;
     }
   }
 }