feat(projects): 添加判断是否是移动端的hooks

This commit is contained in:
Soybean
2021-11-14 22:16:44 +08:00
parent 1a76de0446
commit 0a9fba90b5
13 changed files with 56 additions and 34 deletions

View File

@ -4,7 +4,7 @@
:class="{ 'overflow-hidden': routeProps.fullPage }"
>
<router-view v-slot="{ Component, route }">
<transition :name="theme.pageStyle.animateType" mode="out-in" appear>
<transition :name="theme.pageAnimateType" mode="out-in" appear>
<keep-alive :include="cacheRoutes">
<component :is="Component" v-if="reload" :key="route.fullPath" class="flex-1" />
</keep-alive>

View File

@ -1,9 +1,6 @@
<template>
<n-divider title-placement="center">界面功能</n-divider>
<n-space vertical size="large">
<setting-menu-item label="分割菜单">
<n-switch :value="theme.menuStyle.splitMenu" @update:value="handleSplitMenu" />
</setting-menu-item>
<setting-menu-item label="顶部菜单位置">
<n-select
class="w-120px"
@ -34,7 +31,7 @@
/>
</setting-menu-item>
<setting-menu-item label="固定头部和多页签">
<n-switch :value="splitMenu" :disabled="disabledSplitMenu" @update:value="handleFixedHeaderAndTab" />
<n-switch :value="theme.fixedHeaderAndTab" :disabled="isHorizontalMix" @update:value="handleFixedHeaderAndTab" />
</setting-menu-item>
<setting-menu-item label="头部高度">
<n-input-number
@ -65,7 +62,6 @@ import { SettingMenuItem } from '../common';
const theme = useThemeStore();
const {
handleSplitMenu,
handleHorizontalMenuPosition,
handleFixedHeaderAndTab,
handleHeaderHeight,
@ -74,8 +70,7 @@ const {
handleMixMenuWidth
} = useThemeStore();
const disabledSplitMenu = computed(() => theme.navStyle.mode === 'horizontal-mix');
const splitMenu = computed(() => theme.fixedHeaderAndTab || disabledSplitMenu.value);
const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
const disabledMenuWidth = computed(() => {
const { mode } = theme.navStyle;
return mode !== 'vertical' && mode !== 'horizontal-mix';

View File

@ -2,7 +2,7 @@
<n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="routeProps.fullPage ? 'h-full' : ''">
<div class="inline-block wh-full bg-[#F6F9F8]">
<router-view v-slot="{ Component, route: itemRoute }">
<transition :name="theme.pageStyle.animateType" mode="out-in" appear>
<transition :name="theme.pageAnimateType" mode="out-in" appear>
<keep-alive :include="cacheRoutes">
<component
:is="Component"