add enquire

package.json

@@ -12,6 +12,7 @@
     "ant-design-vue": "^1.0.3",
     "axios": "^0.18.0",
     "dayjs": "^1.7.5",
+    "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",

src/App.vue

@@ -7,12 +7,24 @@
 </template>
 <script>
   import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+  import enquireScreen from '@/utils/device'
 
   export default {
     data () {
       return {
         locale: zhCN,
       }
+    },
+    created () {
+      let that = this
+      enquireScreen(isMobile => {
+        if (isMobile) {
+          that.$store.commit('app/TOGGLE_DEVICE', true)
+        } else {
+          that.$store.commit('app/TOGGLE_SIDEBAR', true)
+        }
+
+      })
     }
   }
 </script>

src/utils/device.js

@@ -0,0 +1,15 @@
+import enquireJs from 'enquire.js'
+
+const enquireScreen = function (call) {
+  const hanlder = {
+    match: function () {
+      call && call(true)
+    },
+    unmatch: function () {
+      call && call(false)
+    }
+  }
+  enquireJs.register('only screen and (max-width: 767.99px)', hanlder)
+}
+
+export default enquireScreen