Vue前端项目-首页-左侧菜单栏-根据设备决定侧边栏的隐藏情况

目录

1、完成步骤1和2

1.1、设备处理文件

1.2、主页中引用步骤1.1创建文件

1.3、测试

2、Vuex中定义全局变量 device

2.1、定义 device 变量,并提供修改方法

2.2、提供 device 的get方法

2.3、在进入首页或翻转屏幕时，重新设置 device 的值

3、完成步骤4和5

3.1、修改 index 主页

3.2、移动端样式

4、完成后效果图

---

实现效果：

步骤：

1、当进入 index 页面， 判断当前设备是否是移动端设备， 在控制台输出一下

2、当 如果设备发生翻转的情况，可能会改变当前设备屏幕的分辨率，因此在发生翻转， 再次判断当前设备是否是移动端设备，在控制台输出一下

3、需要在 Vuex 中使用 全局变量 state.device（值为''mobile''表示移动端, 为"desktop"表示桌面端） 来存储当前的设备，在步骤1的时候 给这个 state.device 赋值，在步骤2时候，判断一下是否要改变 state.device 的值

4、为这个 移动端设备 隐藏侧边栏添加样式 

5、动态的给 index 页面侧边栏添加隐藏样式 

补充：

如果判断当前设备是 移动设备 还是 桌面端设备 ？

在项目中规定，屏幕分辨率宽度 > 992 算是桌面端设备, 其余的算 移动端设备

1、完成步骤1和2

1.1、设备处理文件

新建 src / layout /  mixin / ResizeHandle.js 文件, 内容

const { body } = document
const WIDTH = 992 // refer to Bootstrap's responsive design

export default {
  beforeMount() {
    window.addEventListener('resize', this.$_resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.$_resizeHandler)
  },
  mounted() {
    const isMobile = this.$_isMobile()
    console.log('isMobile=' + isMobile)
  },
  methods: {
    $_isMobile() {
      const rect = body.getBoundingClientRect()
      return rect.width - 1 < WIDTH
    },
    $_resizeHandler() {
      if (!document.hidden) {
        const isMobile = this.$_isMobile()
        if (isMobile) {
          console.log('当前是移动端设备')
        } else {
          console.log('当前是桌面端设备')
        }
      }
    }
  }
}

1.2、主页中引用步骤1.1创建文件

在 src / layout / index.vue 文件中

import ResizeMixin from './mixin/ResizeHandler'

  mixins: [ResizeMixin]

具体代码:

<template>
  <div
    class="app-wrapper"
    :class="classObj"
  >
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <navbar />
      <app-main />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
// import AppMain from './components/AppMain.vue'
// import { AppMain, Navbar, Sidebar } from './components'
import { Sidebar, Navbar, AppMain } from './components'
import { mapState } from 'vuex'
import ResizeMixin from './mixin/Res