69 lines
1.5 KiB
TypeScript
69 lines
1.5 KiB
TypeScript
|
import { useAppStore, DeviceType } from '@/store/modules/app'
|
||
|
|
import { computed, watch } from 'vue'
|
||
|
|
import { useRoute } from 'vue-router'
|
||
|
|
|
||
|
|
/** 参考 Bootstrap 的响应式设计 width = 992 */
|
||
|
|
const WIDTH = 992
|
||
|
|
|
||
|
|
/** 根据大小变化重新布局 */
|
||
|
|
export default function() {
|
||
|
|
const appStore = useAppStore()
|
||
|
|
|
||
|
|
const device = computed(() => {
|
||
|
|
return appStore.device
|
||
|
|
})
|
||
|
|
|
||
|
|
const sidebar = computed(() => {
|
||
|
|
return appStore.sidebar
|
||
|
|
})
|
||
|
|
|
||
|
|
const currentRoute = useRoute()
|
||
|
|
|
||
|
|
const watchRouter = watch(
|
||
|
|
() => currentRoute.name,
|
||
|
|
() => {
|
||
|
|
if (appStore.device === DeviceType.Mobile && appStore.sidebar.opened) {
|
||
|
|
appStore.closeSidebar(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
const isMobile = () => {
|
||
|
|
const rect = document.body.getBoundingClientRect()
|
||
|
|
return rect.width - 1 < WIDTH
|
||
|
|
}
|
||
|
|
|
||
|
|
const resizeMounted = () => {
|
||
|
|
if (isMobile()) {
|
||
|
|
appStore.toggleDevice(DeviceType.Mobile)
|
||
|
|
appStore.closeSidebar(true)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const resizeHandler = () => {
|
||
|
|
if (!document.hidden) {
|
||
|
|
appStore.toggleDevice(isMobile() ? DeviceType.Mobile : DeviceType.Desktop)
|
||
|
|
if (isMobile()) {
|
||
|
|
appStore.closeSidebar(true)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const addEventListenerOnResize = () => {
|
||
|
|
window.addEventListener('resize', resizeHandler)
|
||
|
|
}
|
||
|
|
|
||
|
|
const removeEventListenerResize = () => {
|
||
|
|
window.removeEventListener('resize', resizeHandler)
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
device,
|
||
|
|
sidebar,
|
||
|
|
resizeMounted,
|
||
|
|
addEventListenerOnResize,
|
||
|
|
removeEventListenerResize,
|
||
|
|
watchRouter
|
||
|
|
}
|
||
|
|
}
|