提交数据

src/layout/components/Sidebar/Logo.vue

@@ -19,11 +19,10 @@ import { useStore } from 'vuex' // useStore ===vue2.0中的this.$store
 import logo from '@/assets/logo.png'
 
 const store = useStore()
-// const logo = ref<string>('@/assets/logo.png')
 const title = ref<string>('Vue Admin Perfect')
 
 const isCollapse = computed(()=>{
-  return store.state.app.isCollapse
+  return !store.state.app.isCollapse
 })
 
 </script>

src/layout/components/Sidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="{'has-logo':isCollapse}">
     <logo :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
@@ -7,6 +7,7 @@
           active-text-color="#ffd04b"
           background-color="#304156"
           text-color="#fff"
+          :collapse-transition="false"
           class="el-menu-vertical-demo"
           :collapse="isCollapse"
       >
@@ -47,7 +48,7 @@
 
   // 是否折叠
   const isCollapse = computed(()=>{
-    return store.state.app.isCollapse
+    return !store.state.app.isCollapse
   })
 </script>
 

src/layout/components/UHeader/index.vue

@@ -3,14 +3,11 @@
     <div class="header">
       <div class="left">
         <div>
-          <el-icon class="icon" v-if="isCollapse" @click="handleCollapse(false)"><expand /></el-icon>
-          <el-icon class="icon" v-else @click="handleCollapse(true)"><fold/></el-icon>
+          <el-icon class="icon" v-if="isCollapse" @click="handleCollapse"><expand /></el-icon>
+          <el-icon class="icon" v-else @click="handleCollapse"><fold/></el-icon>
         </div>
-
         <u-hamburger/>
       </div>
-
-
       <div class="right">
         <u-screen-full/>
         <el-dropdown @command="commandAction">
@@ -49,7 +46,7 @@
   const router = useRouter()
 
   const isCollapse = computed(()=>{
-    return store.state.app.isCollapse
+    return !store.state.app.isCollapse
   })
 
   const userInfo = computed(()=>{
@@ -90,12 +87,17 @@
     }
   }
 
-  const handleCollapse = (type:boolean) => {
-    store.commit('app/SET_COLLAPSE', type)
+  const handleCollapse = () => {
+    store.commit('app/SET_COLLAPSE', isCollapse.value)
   }
 </script>
 
 <style lang="scss" scoped>
+.mobile{
+  .m-layout-header{
+    left: 0!important;
+  }
+}
   .icon{
     font-size:24px;
     cursor: pointer;

src/layout/hooks/useResizeHandler.ts

@@ -0,0 +1,51 @@
+import store from '@/store'
+import {computed, onMounted, onUnmounted, watch} from "vue";
+import {useRoute} from "vue-router";
+
+const { body } = document
+
+console.log('document',document.hidden)
+
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export const useResizeHandler = ()=>{
+    const route = useRoute()
+    const device = computed(()=>{
+        return store.state.app.device
+    })
+    function $_isMobile(){
+        const rect = body.getBoundingClientRect()
+        return rect.width - 1 < WIDTH
+    }
+    function $_resizeHandler(){
+        if (!document.hidden) { // bool型，表示页面是否处于隐藏状态。页面隐藏包括页面在后台标签页或者浏览器最小化
+            const isMobile = $_isMobile()
+            store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
+
+            if (isMobile) {
+                store.dispatch('app/closeSideBar', { withoutAnimation: true })
+            }
+        }
+    }
+    onMounted(()=>{
+        const isMobile = $_isMobile()
+        if (isMobile) {
+            store.dispatch('app/toggleDevice', 'mobile')
+            store.dispatch('app/closeSideBar', { withoutAnimation: true })
+        }
+        window.addEventListener('resize', $_resizeHandler)
+
+        watch(route,()=>{
+            if (device.value === 'mobile' && store.state.app.isCollapse) {
+                store.dispatch('app/closeSideBar', { withoutAnimation: false })
+            }
+        })
+    })
+
+    onUnmounted(()=>{
+        window.removeEventListener('resize', $_resizeHandler)
+    })
+
+
+    return {device}
+}

src/layout/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="g-container-layout" :class="{hideSidebar:isCollapse}">
-    <sidebar class="sidebar-container" :isCollapse="isCollapse"/>
+  <div class="g-container-layout" :class="classObj" >
+    <div v-if="device==='mobile'&&!isCollapse" class="drawer-bg" @click="handleClickOutside" />
+    <sidebar class="sidebar-container"/>
     <div class="main-container">
       <u-header />
       <app-main/>
@@ -13,6 +14,7 @@
   import Sidebar from './components/Sidebar/index.vue'
   import UHeader from './components/UHeader/index.vue'
   import AppMain from './components/AppMain.vue'
+  import {useResizeHandler} from './hooks/useResizeHandler'
 
   import {useStore} from "vuex";
 
@@ -27,10 +29,27 @@
       const store = useStore()
       // 是否折叠
       const isCollapse = computed(()=>{
-        return store.state.app.isCollapse
+        return !store.state.app.isCollapse
       })
+      let {device} = useResizeHandler()
+
+      const classObj = computed(()=>{
+        return {
+          hideSidebar:!store.state.app.isCollapse,
+          openSidebar: store.state.app.isCollapse,
+          withoutAnimation: store.state.app.withoutAnimation,
+          mobile: device.value === 'mobile'
+        }
+      })
+      const handleClickOutside = ()=> {
+        store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      }
+
       return{
-        isCollapse
+        isCollapse,
+        device,
+        classObj,
+        handleClickOutside
       }
     }
   });
@@ -48,5 +67,18 @@
       box-sizing: border-box;
       flex-direction: column
     }
+    &.mobile.openSidebar {
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
   }
 </style>

src/store/modules/app.ts

@@ -1,21 +1,42 @@
 import {Module} from "vuex";
 
 const state = {
-    isCollapse: false,
+    isCollapse: true,
+    withoutAnimation:false,
+    device: 'desktop',
 }
 
 const mutations = {
     SET_COLLAPSE: (state, value) => {
         state.isCollapse = value
-    }
-}
+        state.withoutAnimation = false
+    },
+    // 获取设备
+    TOGGLE_DEVICE: (state, device) => {
+        state.device = device
 
+    },
+    // 点击遮罩层 关闭左边按钮
+    CLOSE_SIDEBAR:(state, withoutAnimation) => {
+        state.isCollapse = false
+        state.withoutAnimation = withoutAnimation
+    },
+}
+const actions = {
+    toggleDevice({ commit }, device) {
+        commit('TOGGLE_DEVICE', device)
+    },
+    closeSideBar({ commit }, { withoutAnimation }) {
+        commit('CLOSE_SIDEBAR', withoutAnimation)
+    },
+}
 
 
 const app:Module<any, any> = {
     namespaced:true,
     state,
     mutations,
+    actions
 }
 
 export default app

src/views/login/index.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="login-container">
-    <video
-        poster="@/assets/mp4/3.jpeg"
-        loop
-        autoplay
-        muted
-    >
-      <source src="@/assets/mp4/2.mp4">
-    </video>
+<!--    <video-->
+<!--        poster="@/assets/mp4/3.jpeg"-->
+<!--        loop-->
+<!--        autoplay-->
+<!--        muted-->
+<!--    >-->
+<!--      <source src="@/assets/mp4/2.mp4">-->
+<!--    </video>-->
+
+    <img src="@/assets/2.png" class="bg"/>
     <div class="login-box">
       <!--登录功能-->
       <div style="color: white;text-align: center;margin-bottom: 15px">登录系统-密码账号随便填 admin admin</div>
@@ -125,6 +127,18 @@
       object-fit: cover;
       z-index: -1;
     }
+    .bg{
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      -o-object-fit: cover;
+      object-fit: cover;
+      z-index: -1;
+    }
     min-height: 100%;
     width: 100%;
     overflow: hidden;