@lambo-design/pro-layout 1.0.0-beta.475 → 1.0.0-beta.477

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.475",
+  "version": "1.0.0-beta.477",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,8 +10,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/shared": "^1.0.0-beta.385",
-    "@lambo-design/core": "^4.7.1-beta.184"
+    "@lambo-design/core": "^4.7.1-beta.184",
+    "@lambo-design/shared": "^1.0.0-beta.385"
   },
   "scripts": {
     "release-pro-layout": "pnpm release-beta && git push --follow-tags && pnpm re-publish",

package/src/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <i-layout class="pro-layout" :class="layoutClass">
+  <i-layout
+      class="pro-layout"
+      :class="[layoutClass, { 'show-sider-scrollbar': systemInfo.showSiderScrollbar === '1' }]"
+  >
     <i-header class="pro-layout-header" :style="systemInfo.headBackground ? headBackgroundStyle : ''">
       <LamboProLayoutHeader :is-home="isHome" :is-show-left-menu="isShowLeftMenu" ref="header">
         <template slot = "pro-layout-trigger">
@@ -60,7 +63,6 @@
     ></div>
   </i-layout>
 </template>
-
 <script>
 import LamboProLayoutHeader from './components/pro-layout-header'
 import LamboProLayoutSider from './components/pro-layout-sider'
@@ -98,7 +100,8 @@ export default {
           menuScaling:'1',
           headBackground:'',
           menuLogo: '1',
-          titleShow:'wrap'
+          titleShow:'wrap',
+          showSiderScrollbar: '0'  //'1' 显示滚动条，'0' 隐藏滚动条
         }
       }
     },
@@ -454,7 +457,7 @@ export default {
   top: 0;
   width: 100vw;
   height: 100vh;
-  z-index: 999999; /* 比所有菜单、浮层都高 */
+  z-index: 999999;
   background: transparent;
   cursor: col-resize;
 }
@@ -473,9 +476,6 @@ export default {
   background: #ddd;
 }
 
-.sider-resize-bar:hover {
-  background: #ddd;
-}
 .pro-layout {
   height: 100vh;
   width: 100%;
@@ -492,10 +492,15 @@ export default {
       overflow-y: scroll;
       margin-right: -18px;
       padding-right: 17px;
-    }
-    .ivu-layout-sider-children::-webkit-scrollbar {
-      /* 隐藏默认的滚动条 */
-      display: none;
+
+      &::-webkit-scrollbar {
+        /* 隐藏默认的滚动条 */
+        display: none;
+      }
+      // Firefox 隐藏
+      scrollbar-width: none;
+      // IE/Edge 隐藏
+      -ms-overflow-style: none;
     }
   }
   .pro-layout-content {
@@ -523,7 +528,6 @@ export default {
           .pro-layout-logo-wrapper {
             .logo {
               height: 40px;
-              //margin-top: 14px;
             }
             .divider {
               height: 26px;
@@ -545,10 +549,11 @@ export default {
       .ivu-layout-sider-children {
         height: calc(100vh - 50px);
         padding-right: 17px;
-      }
-      .ivu-layout-sider-children::-webkit-scrollbar {
-        /* 隐藏默认的滚动条 */
-        display: none;
+
+        &::-webkit-scrollbar {
+          /* 隐藏默认的滚动条 */
+          display: none;
+        }
       }
     }
     .pro-layout-content {
@@ -560,5 +565,55 @@ export default {
       }
     }
   }
+
+  // 通过 systemInfo 控制显示滚动条
+  &.show-sider-scrollbar {
+    .pro-layout-sider {
+      .ivu-layout-sider-children {
+        // 移除隐藏的 hack
+        margin-right: 0;
+        padding-right: 0;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+          display: block;
+          width: 6px;
+          height: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: transparent;
+          border-radius: 3px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: #c1c1c1;
+          border-radius: 3px;
+          transition: background 0.2s;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+          background: #a8a8a8;
+        }
+
+        // Firefox 显示
+        scrollbar-width: auto;
+        scrollbar-color: #c1c1c1 transparent;
+      }
+    }
+
+    &.small {
+      .pro-layout-sider {
+        .ivu-layout-sider-children {
+          padding-right: 0;
+
+          &::-webkit-scrollbar {
+            display: block;
+            width: 6px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>