feat(sideBar): 添加手机模式侧边栏 (#230)

Author: quanquan2100

src/components/layout/SideBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-sidebar">
-    <div class="logo" v-if="!isCollapse">
+    <div class="logo" v-if="!elMenuCollapse">
       <img src="../../assets/img/logo.png" alt="">
     </div>
     <div class="mobile-logo" v-else>
@@ -34,7 +34,7 @@
         class="el-menu-vertical-demo"
         ref="meun"
         :default-active="defaultActive"
-        :collapse="isCollapse"
+        :collapse="elMenuCollapse"
         background-color="#192A5E"
         text-color="rgba(196,201,210,1)"
         active-text-color="#1890ff">
@@ -112,7 +112,6 @@ import Utils from '@/lin/utils/util'
 import Config from '../../config/index'
 
 export default {
-  props: ['isCollapse'],
   data() {
     return {
       sidebar: '',
@@ -122,6 +121,18 @@ export default {
     }
   },
   inject: ['eventBus'],
+  props: {
+    isPhone: {
+      type: Boolean,
+      default: false,
+    },
+    isCollapse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created() {
+  },
   mounted() {
     this.eventBus.$on('removeSidebarSearch', () => {
       this.showSidebarSearch = false
@@ -188,6 +199,13 @@ export default {
     },
   },
   computed: {
+    elMenuCollapse() {
+      if (this.isPhone) {
+        return false
+      }
+
+      return this.isCollapse
+    },
     // 根据当前路由设置激活侧边栏
     defaultActive() {
       for (let i = (this.stageInfo.length - 1); i >= 0; i -= 1) {
@@ -227,7 +245,7 @@ export default {
       return mapData
     },
     imgSrc() {
-      return this.isCollapse === false ? '../../assets/img/left-logo.png' : '../../assets/img/logo.png'
+      return this.elMenuCollapse === false ? '../../assets/img/left-logo.png' : '../../assets/img/logo.png'
     },
     ...mapGetters(['sideBarList']),
   },

src/views/home/Home.vue

@@ -1,18 +1,14 @@
 <template>
   <div style="height:100%;">
     <el-container>
-      <el-aside :width="sideBarWidth" class="aside">
-        <side-bar :isCollapse="isCollapse"></side-bar>
+      <el-aside :width="sideBarWidth" class="aside" :style="asideStyle">
+        <side-bar :isCollapse="isCollapse" :is-phone="isPhone"></side-bar>
       </el-aside>
       <el-container>
         <el-header class="header">
           <div class="left">
             <div class="operate" ref="operate">
-              <i
-                class="iconfont icon-fold"
-                :class="{rotate: foldState}"
-                @click="changeSlidebarState"
-              />
+              <i class="iconfont icon-fold" :class="{rotate: foldState}" @click="changeSlidebarState" />
               <nav-bar></nav-bar>
             </div>
             <el-collapse-transition>
@@ -26,6 +22,7 @@
         </el-main>
         <back-top :right="50" :bottom="50" :fontSize="34"></back-top>
       </el-container>
+      <div class="sidenav-mask" :class="{show: isPhone && isCollapse}" @click="changeSlidebarState"></div>
     </el-container>
   </div>
 </template>
@@ -55,24 +52,46 @@ export default {
       clientWidth: 0, // 页面宽度
       clientHeight: 0, // 页面高度
       foldState: false, // 控制左侧菜单栏按键
+      isPhone: false,
     }
   },
+  created() {
+  },
   mounted() {
-    const _this = this
     this.setResize()
+    // console.log(this.clientWidth)
+    if (this.clientWidth < 500) {
+      this.isPhone = true
+    } else {
+      this.isPhone = false
+      // 检测屏幕宽度, 确定默认是否展开
+      if (this.clientWidth <= 768) {
+        this.eventBus.$emit('removeSidebarSearch')
+        this.isCollapse = true
+      } else {
+        this.isCollapse = false
+        this.eventBus.$emit('showSidebarSearch')
+      }
+    }
     // 监测屏幕宽度 折叠左侧菜单栏
-    window.onresize = function temp() {
-      _this.setResize()
-      if (_this.clientWidth <= 768) {
-        // 页面宽度 768
-        if (_this.isCollapse === false) {
-          _this.eventBus.$emit('removeSidebarSearch')
-          _this.isCollapse = true
-        }
-      } else if (_this.isCollapse === true) {
-        _this.eventBus.$emit('showSidebarSearch')
-        _this.isCollapse = false
+    window.onresize = () => {
+      this.setResize()
+      if (this.clientWidth <= 500) {
+        this.isPhone = true
+      } else if (this.clientWidth <= 800) {
+        this.isPhone = false
       }
+
+      // if (_this.clientWidth <= 768) {
+      //   // 页面宽度 768
+      //   if (_this.isCollapse === false) {
+      //     _this.eventBus.$emit('removeSidebarSearch')
+      //     _this.isCollapse = true
+      //   }
+      // } else if (_this.isCollapse === true) {
+      //   _this.eventBus.$emit('showSidebarSearch')
+      //   _this.isCollapse = false
+      // }
     }
 
     this.eventBus.$on('noReuse', () => {
@@ -83,6 +102,29 @@ export default {
     })
   },
   inject: ['eventBus'],
+  computed: {
+    elMenuCollapse() {
+      if (this.isPhone) {
+        return false
+      }
+
+      return this.isCollapse
+    },
+    asideStyle() {
+      const style = {}
+      if (this.isPhone) {
+        style.position = 'absolute'
+        style.height = `${this.clientHeight}px`
+        style.zIndex = 12
+        if (this.isCollapse === false) {
+          style.transform = `translateX(-${sideBarWidth})`
+        } else {
+          style.transform = 'translateX(0)'
+        }
+      }
+      return style
+    },
+  },
   methods: {
     // 控制菜单折叠
     changeSlidebarState() {
@@ -105,14 +147,28 @@ export default {
   },
   watch: {
     isCollapse() {
-      this.sideBarWidth = this.isCollapse === false ? sideBarWidth : '64px'
+      if (this.isPhone) {
+        // 手机模式
+        this.sideBarWidth = sideBarWidth
+        if (this.isCollapse === false) {
+          this.transX = 0
+        } else {
+          this.transX = -1 * sideBarWidth
+        }
+      } else {
+        this.transX = 0
+        this.sideBarWidth = this.isCollapse === false ? sideBarWidth : '64px'
+      }
     },
     $route() {
       this.showBackTop = false
       if (this.scrollY <= 70) {
         // MenuTab组件高度
         this.backTop()
       }
+      if (this.isPhone && this.isCollapse) {
+        this.changeSlidebarState()
+      }
     },
   },
   components: {
@@ -134,7 +190,8 @@ export default {
 .aside {
   background: rgb(25, 42, 94);
   overflow-x: hidden;
-   &::-webkit-scrollbar {
+
+  &::-webkit-scrollbar {
     width: 0px;
     height: 0px;
   }
@@ -208,8 +265,25 @@ export default {
   border-radius: 50%;
   z-index: 99;
   background: #fff;
+
   .iconfont {
     font-size: 36px;
   }
 }
+
+.sidenav-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .3);
+  z-index: 10;
+  display: none;
+  cursor: pointer;
+
+  &.show {
+    display: block;
+  }
+}
 </style>