目录
2.3、在进入首页或翻转屏幕时,重新设置 device 的值
实现效果:
步骤:
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/ResizeHandler'
export default {
name: 'Lay