39 lines
970 B
TypeScript
39 lines
970 B
TypeScript
import { nextTick, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import useStore from '@/stores'
|
|
import { DeviceType } from '@/enums/common'
|
|
/** 参考 Bootstrap 的响应式设计 WIDTH = 600 */
|
|
const WIDTH = 600
|
|
|
|
/** 根据大小变化重新布局 */
|
|
export default () => {
|
|
const { common } = useStore()
|
|
const _isMobile = () => {
|
|
const rect = document.body?.getBoundingClientRect()
|
|
return rect.width - 1 < WIDTH
|
|
}
|
|
|
|
const _resizeHandler = () => {
|
|
if (!document.hidden) {
|
|
const isMobile = _isMobile()
|
|
common.toggleDevice(isMobile ? DeviceType.Mobile : DeviceType.Desktop)
|
|
}
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
window.addEventListener('resize', _resizeHandler)
|
|
})
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
if (_isMobile()) {
|
|
common.toggleDevice(DeviceType.Mobile)
|
|
}
|
|
})
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', _resizeHandler)
|
|
})
|
|
}
|