|
|
// 从项目的 @/store 目录下导入 Vuex 的 store 实例，这个 store 通常用于管理应用中的状态数据以及处理相关的业务逻辑，例如控制侧边栏的显示隐藏、设备类型的切换等操作
|
|
|
import store from '@/store'
|
|
|
|
|
|
// 通过解构赋值从 document 对象中获取 body 属性，后续可能会基于这个 body 元素来获取页面相关的尺寸等信息，比如判断页面宽度是否满足移动端的条件
|
|
|
const { body } = document
|
|
|
// 定义一个常量 WIDTH，表示一个宽度的阈值，单位应该是像素，这里设置为 1024px，可能用于区分移动端和桌面端设备（比如页面宽度小于这个值时认为是移动端）
|
|
|
const WIDTH = 1024
|
|
|
// 定义一个常量 RATIO，具体含义可能和页面尺寸判断逻辑相关，结合代码来看，可能是在判断页面宽度是否符合移动端条件时需要减去的一个值
|
|
|
const RATIO = 3
|
|
|
|
|
|
export default {
|
|
|
// watch 选项用于监听组件中的数据变化，这里监听了 $route（Vue 路由对象）的变化
|
|
|
watch: {
|
|
|
$route(route) {
|
|
|
// 判断当前设备是否为移动端（通过 this.device ==='mobile' 判断，这里的 this.device 应该是组件中的某个属性，用于标识设备类型）并且侧边栏是打开状态（this.sidebar.opened）
|
|
|
if (this.device === 'mobile' && this.sidebar.opened) {
|
|
|
// 如果满足上述条件，通过 store.dispatch 方法触发 Vuex store 中的 'CloseSideBar' 这个 action，传入一个配置对象 { withoutAnimation: false }，表示关闭侧边栏，并且关闭时是否有动画效果设置为 false（可能在对应的 action 实现中有相应的处理逻辑来根据这个配置关闭侧边栏并控制动画展示情况）
|
|
|
store.dispatch('CloseSideBar', { withoutAnimation: false })
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// beforeMount 生命周期钩子函数，在组件挂载到 DOM 之前被调用。这里给 window 对象添加了一个'resize' 事件监听器，当窗口大小发生变化时，会触发 this.resizeHandler 方法，用于处理窗口大小变化相关的逻辑
|
|
|
beforeMount() {
|
|
|
window.addEventListener('resize', this.resizeHandler)
|
|
|
},
|
|
|
// mounted 生命周期钩子函数，在组件挂载到 DOM 之后被调用。这里首先调用 this.isMobile 方法来判断当前设备是否为移动端
|
|
|
mounted() {
|
|
|
const isMobile = this.isMobile()
|
|
|
if (isMobile) {
|
|
|
// 如果是移动端，通过 store.dispatch 方法触发 Vuex store 中的 'ToggleDevice' 这个 action，传入'mobile' 字符串参数，可能用于在 store 中更新设备类型的状态为移动端，以便后续根据这个状态进行相应的布局或功能调整
|
|
|
store.dispatch('ToggleDevice', 'mobile')
|
|
|
// 同时触发 'CloseSideBar' 这个 action，传入 { withoutAnimation: true }，表示关闭侧边栏并且关闭过程不显示动画，用于在移动端初始加载时关闭侧边栏以适应移动端布局等情况
|
|
|
store.dispatch('CloseSideBar', { withoutAnimation: true })
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 定义一个名为 isMobile 的方法，用于判断当前设备是否为移动端
|
|
|
isMobile() {
|
|
|
// 通过 body.getBoundingClientRect() 方法获取 body 元素的尺寸信息（返回一个包含元素的位置、宽度、高度等信息的 DOMRect 对象）
|
|
|
const rect = body.getBoundingClientRect()
|
|
|
// 判断页面可视区域的宽度（rect.width）减去常量 RATIO 的值是否小于定义的 WIDTH（1024px），如果小于则认为当前设备是移动端，返回 true，否则返回 false
|
|
|
return rect.width - RATIO < WIDTH
|
|
|
},
|
|
|
// 定义 resizeHandler 方法，用于处理窗口大小变化的逻辑，当窗口触发'resize' 事件时会调用这个方法
|
|
|
resizeHandler() {
|
|
|
// 判断当前页面是否处于隐藏状态（比如切换到其他标签页等情况，document.hidden 为 true 表示页面被隐藏），如果页面没有隐藏
|
|
|
if (!document.hidden) {
|
|
|
// 调用 this.isMobile 方法重新判断当前设备是否变为移动端
|
|
|
const isMobile = this.isMobile()
|
|
|
// 通过 store.dispatch 方法触发 Vuex store 中的 'ToggleDevice' 这个 action，根据 isMobile 的结果传入'mobile' 或者 'desktop'，用于更新 store 中设备类型的状态，使其与当前实际设备类型保持一致
|
|
|
store.dispatch('ToggleDevice', isMobile? 'mobile' : 'desktop')
|
|
|
|
|
|
if (isMobile) {
|
|
|
// 如果当前设备变为移动端，触发 'CloseSideBar' 这个 action，传入 { withoutAnimation: true }，关闭侧边栏并且不显示动画，以适应移动端布局要求
|
|
|
store.dispatch('CloseSideBar', { withoutAnimation: true })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
