fix(BackTop): repair BackTup comp (#3581)

This commit is contained in:
xachary 2024-01-30 14:14:23 +08:00 committed by GitHub
parent 62c124ef45
commit 6f4bdae5c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 8 deletions

View File

@ -1,9 +1,17 @@
<template> <template>
<div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading"> <div
:class="[prefixCls, getLayoutContentMode]"
v-loading="getOpenPageLoading && getPageLoading"
ref="content"
>
<PageLayout /> <PageLayout />
<BackTop v-if="getUseOpenBackTop" :target="() => content" :visibilityHeight="100" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue';
import { BackTop } from 'ant-design-vue';
import PageLayout from '@/layouts/page/index.vue'; import PageLayout from '@/layouts/page/index.vue';
import { useDesign } from '@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useRootSetting } from '@/hooks/setting/useRootSetting'; import { useRootSetting } from '@/hooks/setting/useRootSetting';
@ -14,9 +22,11 @@
const { prefixCls } = useDesign('layout-content'); const { prefixCls } = useDesign('layout-content');
const { getOpenPageLoading } = useTransitionSetting(); const { getOpenPageLoading } = useTransitionSetting();
const { getLayoutContentMode, getPageLoading } = useRootSetting(); const { getLayoutContentMode, getPageLoading, getUseOpenBackTop } = useRootSetting();
useContentViewHeight(); useContentViewHeight();
const content = ref();
</script> </script>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-layout-content'; @prefix-cls: ~'@{namespace}-layout-content';

View File

@ -1,6 +1,5 @@
<template> <template>
<LayoutLockPage /> <LayoutLockPage />
<BackTop v-if="getUseOpenBackTop" :target="getTarget" />
<SettingDrawer <SettingDrawer
v-if="getIsFixedSettingDrawer && (!getShowMultipleTab || getFullContent)" v-if="getIsFixedSettingDrawer && (!getShowMultipleTab || getFullContent)"
:class="prefixCls" :class="prefixCls"
@ -9,7 +8,6 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, unref } from 'vue'; import { computed, unref } from 'vue';
import { BackTop } from 'ant-design-vue';
import { useRootSetting } from '@/hooks/setting/useRootSetting'; import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'; import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
@ -28,10 +26,7 @@
const LayoutLockPage = createAsyncComponent(() => import('@/views/sys/lock/index.vue')); const LayoutLockPage = createAsyncComponent(() => import('@/views/sys/lock/index.vue'));
const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue')); const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'));
const getTarget = () => document.body; const { getShowSettingButton, getSettingButtonPosition, getFullContent } = useRootSetting();
const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
useRootSetting();
const userStore = useUserStoreWithOut(); const userStore = useUserStoreWithOut();
const { prefixCls } = useDesign('setting-drawer-feature'); const { prefixCls } = useDesign('setting-drawer-feature');
const { getShowHeader } = useHeaderSetting(); const { getShowHeader } = useHeaderSetting();