feat: support tablet screen

Author: sendya

src/App.vue

@@ -5,9 +5,10 @@
     </div>
   </a-locale-provider>
 </template>
+
 <script>
   import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
-  import enquireScreen from '@/utils/device'
+  import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
   import { version } from 'ant-design-vue'
 
   export default {
@@ -17,25 +18,28 @@
         version
       }
     },
-    created () {
-      const that = this
+    mounted () {
+      const { $store } = this
       console.log('use Ant-Design Of Vue:', version)
-      enquireScreen(deviceType => {
-        // tablet
-        if (deviceType === 0) {
-          that.$store.commit('TOGGLE_DEVICE', 'mobile')
-          that.$store.dispatch('setSidebar', false)
-        }
-        // mobile
-        else if (deviceType === 1) {
-          that.$store.commit('TOGGLE_DEVICE', 'mobile')
-          that.$store.dispatch('setSidebar', false)
-        }
-        else {
-          that.$store.commit('TOGGLE_DEVICE', 'desktop')
-          that.$store.dispatch('setSidebar', true)
-        }
+      deviceEnquire(deviceType => {
 
+        switch (deviceType) {
+          case DEVICE_TYPE.DESKTOP:
+            $store.commit('TOGGLE_DEVICE', 'desktop')
+            $store.dispatch('setSidebar', true)
+            break
+          case DEVICE_TYPE.TABLET:
+            console.log('tablet')
+            $store.dispatch('ToggleDevice', 'tablet')
+            $store.dispatch('setSidebar', false)
+            break
+          case DEVICE_TYPE.MOBILE:
+          default:
+            $store.commit('TOGGLE_DEVICE', 'mobile')
+            $store.dispatch('setSidebar', false)
+            break
+        }
+        console.log('deviceType', deviceType)
       })
     }
   }

src/components/page/GlobalLayout.vue

@@ -1,22 +1,22 @@
 <template>
   <a-layout class="layout" :class="[device]">
 
-    <template v-if="layoutMode === 'sidemenu'">
+    <template v-if="isSideMenu()">
       <a-drawer
-        v-if="device === 'mobile'"
+        v-if="isMobile()"
         :wrapClassName="'drawer-sider ' + navTheme"
-        placement="left"
-        @close="() => this.collapsed = false"
         :closable="false"
         :visible="collapsed"
+        placement="left"
+        @close="() => this.collapsed = false"
       >
         <side-menu
-          mode="inline"
           :menus="menus"
-          @menuSelect="menuSelect"
           :theme="navTheme"
           :collapsed="false"
-          :collapsible="true"></side-menu>
+          :collapsible="true"
+          mode="inline"
+          @menuSelect="menuSelect"></side-menu>
       </a-drawer>
 
       <side-menu
@@ -30,31 +30,31 @@
     <!-- 下次优化这些代码 -->
     <template v-else>
       <a-drawer
-        v-if="device === 'mobile'"
+        v-if="isMobile()"
         :wrapClassName="'drawer-sider ' + navTheme"
         placement="left"
         @close="() => this.collapsed = false"
         :closable="false"
         :visible="collapsed"
       >
         <side-menu
-          mode="inline"
           :menus="menus"
-          @menuSelect="menuSelect"
           :theme="navTheme"
           :collapsed="false"
-          :collapsible="true"></side-menu>
+          :collapsible="true"
+          mode="inline"
+          @menuSelect="menuSelect"></side-menu>
       </a-drawer>
     </template>
 
     <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 256 : 80}px` : '0' }">
       <!-- layout header -->
-      <global-header 
-        :mode="layoutMode" 
-        :menus="menus" 
-        :theme="navTheme" 
-        :collapsed="collapsed" 
-        :device="device" 
+      <global-header
+        :mode="layoutMode"
+        :menus="menus"
+        :theme="navTheme"
+        :collapsed="collapsed"
+        :device="device"
         @toggle="toggle"
       />
 
@@ -104,11 +104,14 @@
     },
     watch: {
       sidebarOpened(val) {
+        console.log('sidebarOpened', val)
         this.collapsed = !val
       },
     },
     created() {
       this.menus = this.mainMenu.find((item) => item.path === '/').children
+      console.log('created/sidebarOpened', this.sidebarOpened)
+      this.collapsed = !this.sidebarOpened
     },
     methods: {
       ...mapActions(['setSidebar']),
@@ -140,7 +143,7 @@
     min-height: 100vh;
     overflow-x: hidden;
 
-    &.mobile {
+    &.mobile,&.tablet {
 
       .ant-layout-content {
 
@@ -301,7 +304,7 @@
       }
     }
 
-    &.mobile {
+    &.mobile,&.tablet {
       .top-nav-header-index {
 
         .header-index-wide {

src/main.js

@@ -40,7 +40,7 @@ Vue.use(PermissionHelper)
 new Vue({
   router,
   store,
-  mounted () {
+  created () {
     store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
     store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
     store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
@@ -52,6 +52,8 @@ new Vue({
     store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
     store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
 
+    console.log('.... created ()')
+
     removeLoadingAnimate('preloadingWrapper')
   },
   render: h => h(App)

src/store/modules/app.js

@@ -13,10 +13,7 @@ import {
 
 const app = {
   state: {
-    sidebar: {
-      opened: true,
-      withoutAnimation: false
-    },
+    sidebar: true,
     device: 'desktop',
     theme: '',
     layout: '',
@@ -29,13 +26,14 @@ const app = {
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
-      state.sidebar.opened = type
+      state.sidebar = type
       Vue.ls.set(SIDEBAR_TYPE, type)
+
+      console.log('SET_SIDEBAR_TYPE', type)
     },
-    CLOSE_SIDEBAR: (state, withoutAnimation) => {
+    CLOSE_SIDEBAR: (state) => {
       Vue.ls.set(SIDEBAR_TYPE, true)
-      state.sidebar.opened = false
-      state.sidebar.withoutAnimation = withoutAnimation
+      state.sidebar = false
     },
     TOGGLE_DEVICE: (state, device) => {
       state.device = device
@@ -75,11 +73,11 @@ const app = {
     }
   },
   actions: {
-    setSidebar: ({ commit }, type) => {
+    setSidebar({ commit }, type) {
       commit('SET_SIDEBAR_TYPE', type)
     },
-    CloseSidebar({ commit }, { withoutAnimation }) {
-      commit('CLOSE_SIDEBAR', withoutAnimation)
+    CloseSidebar({ commit }) {
+      commit('CLOSE_SIDEBAR')
     },
     ToggleDevice({ commit }, device) {
       commit('TOGGLE_DEVICE', device)

src/utils/device.js

@@ -1,23 +1,34 @@
 import enquireJs from 'enquire.js'
 
-const enquireScreen = function (call) {
-  // tablet
-  const handler = {
-    match: function () {
-      call && call(0)
-    },
-    unmatch: function () {
-      call && call(-1)
+export const DEVICE_TYPE = {
+  DESKTOP: 'desktop',
+  TABLET: 'tablet',
+  MOBILE: 'mobile',
+}
+
+export const deviceEnquire = function (callback) {
+
+  const matchDesktop = {
+    match: () => {
+      callback && callback(DEVICE_TYPE.DESKTOP)
+    }
+  }
+
+  const matchLablet = {
+    match: () => {
+      callback && callback(DEVICE_TYPE.TABLET)
     }
   }
-  // mobile
-  const handler2 = {
+
+  const matchMobile = {
     match: () => {
-      call && call(1)
+      callback && callback(DEVICE_TYPE.MOBILE)
     }
   }
-  enquireJs.register('screen and (max-width: 1087.99px)', handler)
-  enquireJs.register('screen and (max-width: 767.99px)', handler2)
-}
 
-export default enquireScreen
+  // screen and (max-width: 1087.99px)
+  enquireJs
+    .register('screen and (max-width: 576px)', matchMobile)
+    .register('screen and (min-width: 576px) and (max-width: 1199px)', matchLablet)
+    .register('screen and (min-width: 1200px)', matchDesktop)    
+}

src/utils/mixin.js

@@ -1,4 +1,5 @@
 // import Vue from 'vue'
+import { DEVICE_TYPE } from '@/utils/device'
 import { mapState } from 'vuex'
 
 // const mixinsComputed = Vue.config.optionMergeStrategies.computed
@@ -15,15 +16,15 @@ const mixin = {
       fixSiderbar: state => state.app.fixSiderbar,
       contentWidth: state => state.app.contentWidth,
       autoHideHeader: state => state.app.autoHideHeader,
-      sidebarOpened: state => state.app.sidebar.opened
+      sidebarOpened: state => state.app.sidebar
     })
   },
   methods: {
-    isTopmenu () {
+    isTopMenu () {
       return this.layoutMode === 'topmenu'
     },
     isSideMenu () {
-      return !this.isTopmenu()
+      return !this.isTopMenu()
     }
   }
 }
@@ -36,10 +37,13 @@ const mixinDevice = {
   },
   methods: {
     isMobile () {
-      return this.device === 'mobile'
+      return this.device === DEVICE_TYPE.MOBILE
     },
     isDesktop () {
-      return this.device === 'desktop'
+      return this.device === DEVICE_TYPE.DESKTOP
+    },
+    isTablet () {
+      return this.device === DEVICE_TYPE.TABLET
     }
   }
 }