fix(Layout/index.vue): 修复移动端无法打开左侧菜单的问题

This commit is contained in:
郝先瑞
2022-01-12 00:22:33 +08:00
parent 2f88df9a0f
commit 56ffda6e31

View File

@@ -16,22 +16,14 @@
</template>
<script setup lang="ts">
import {computed, watchEffect,markRaw } from "vue"
import {computed, watchEffect } from "vue"
import {useWindowSize} from '@vueuse/core'
import {AppMain, Navbar, Settings,TagsView} from './components/index.ts'
import {AppMain, Navbar, Settings,TagsView} from './components/index'
import Sidebar from './components/Sidebar/index.vue'
import {useAppStoreHook} from "@/store/modules/app"
import {useSettingStoreHook} from "@/store/modules/settings"
const classObj = computed(() => ({
hideSidebar: !useAppStoreHook().sidebar.opened,
openSidebar: useAppStoreHook().sidebar.opened,
withoutAnimation: useAppStoreHook().sidebar.withoutAnimation,
mobile: useAppStoreHook().device === 'mobile'
}))
const {width, height} = useWindowSize();
const WIDTH = 992
@@ -40,10 +32,16 @@ const device = computed(() => useAppStoreHook().device);
const needTagsView = computed(() => useSettingStoreHook().tagsView);
const fixedHeader = computed(() => useSettingStoreHook().fixedHeader);
const classObj = computed(() => ({
hideSidebar: !sidebar.value.opened,
openSidebar: sidebar.value.opened,
withoutAnimation: sidebar.value.withoutAnimation,
mobile: device.value === 'mobile'
}))
watchEffect(() => {
if (device.value === 'mobile' && sidebar.value.opened == true) {
useAppStoreHook().closeSideBar(false)
}
if (width.value < WIDTH) {
useAppStoreHook().toggleDevice("mobile")
useAppStoreHook().closeSideBar(true)