From d69f0992c75c79b7e86d18aca13ee064918fe9d2 Mon Sep 17 00:00:00 2001 From: 三个三 <2029364173@qq.com> Date: 星期六, 15 七月 2023 00:09:34 +0800 Subject: [PATCH] !27 修复,[VueTypes warn]: VueTypes.extend is deprecated.警告问题 Merge pull request !27 from 三个三/ts --- src/layout/index.vue | 59 +++++++++++++++++++++++++++++++---------------------------- 1 files changed, 31 insertions(+), 28 deletions(-) diff --git a/src/layout/index.vue b/src/layout/index.vue index da55d54..5c01f90 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -1,8 +1,16 @@ <template> <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }"> - <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> - <sidebar v-if="!sidebar.hide" class="sidebar-container" /> + <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> + <side-bar v-if="!sidebar.hide" class="sidebar-container" /> <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"> + <!-- <el-scrollbar> + <div :class="{ 'fixed-header': fixedHeader }"> + <navbar ref="navbarRef" @setLayout="setLayout" /> + <tags-view v-if="needTagsView" /> + </div> + <app-main /> + <settings ref="settingRef" /> + </el-scrollbar> --> <div :class="{ 'fixed-header': fixedHeader }"> <navbar ref="navbarRef" @setLayout="setLayout" /> <tags-view v-if="needTagsView" /> @@ -13,47 +21,43 @@ </div> </template> -<script setup> -import { useWindowSize } from '@vueuse/core' -import Sidebar from './components/Sidebar/index.vue' +<script setup lang="ts"> +import SideBar from './components/Sidebar/index.vue' import { AppMain, Navbar, Settings, TagsView } from './components' -import defaultSettings from '@/settings' - import useAppStore from '@/store/modules/app' import useSettingsStore from '@/store/modules/settings' const settingsStore = useSettingsStore() const theme = computed(() => settingsStore.theme); -const sideTheme = computed(() => settingsStore.sideTheme); const sidebar = computed(() => useAppStore().sidebar); const device = computed(() => useAppStore().device); const needTagsView = computed(() => settingsStore.tagsView); const fixedHeader = computed(() => settingsStore.fixedHeader); const classObj = computed(() => ({ - hideSidebar: !sidebar.value.opened, - openSidebar: sidebar.value.opened, - withoutAnimation: sidebar.value.withoutAnimation, - mobile: device.value === 'mobile' + hideSidebar: !sidebar.value.opened, + openSidebar: sidebar.value.opened, + withoutAnimation: sidebar.value.withoutAnimation, + mobile: device.value === 'mobile' })) -const { proxy } = getCurrentInstance(); -const { width, height } = useWindowSize(); +const { width } = useWindowSize(); const WIDTH = 992; // refer to Bootstrap's responsive design watchEffect(() => { - if (device.value === 'mobile' && sidebar.value.opened) { - useAppStore().closeSideBar({ withoutAnimation: false }) - } - if (width.value - 1 < WIDTH) { - useAppStore().toggleDevice('mobile') - useAppStore().closeSideBar({ withoutAnimation: true }) - } else { - useAppStore().toggleDevice('desktop') - } + if (device.value === 'mobile' && sidebar.value.opened) { + useAppStore().closeSideBar({ withoutAnimation: false }) + } + if (width.value - 1 < WIDTH) { + useAppStore().toggleDevice('mobile') + useAppStore().closeSideBar({ withoutAnimation: true }) + } else { + useAppStore().toggleDevice('desktop') + } }) -const navbarRef = ref(null); +const navbarRef = ref(Navbar); +const settingRef = ref(Settings); onMounted(() => { nextTick(() => { @@ -61,12 +65,11 @@ }) }) -function handleClickOutside() { +const handleClickOutside = () => { useAppStore().closeSideBar({ withoutAnimation: false }) } -const settingRef = ref(null); -function setLayout() { +const setLayout = () => { settingRef.value.openSetting(); } </script> @@ -117,4 +120,4 @@ .mobile .fixed-header { width: 100%; } -</style> \ No newline at end of file +</style> -- Gitblit v1.9.3