update: 通过动态组件解决全屏页加载了非页面组件占用内存开销和加载速度及解决刷新隐私页会闪烁页头页脚的用户体验问题；因为页面布局使用了动态编译，所以vite配置开发环境运行时编译；删除登录页面打印验证码图片，后续添加生产环境自动移除注释和打印。
This commit is contained in:
mixtan
parent
ab6dfa2e12
commit
b63a46629f
2
components.d.ts
vendored
2
components.d.ts
vendored
@ -8,6 +8,8 @@ export {}
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
BasicLayout: typeof import('./src/components/BasicLayout.vue')['default']
|
||||
DynamicLayout: typeof import('./src/components/DynamicLayout.vue')['default']
|
||||
ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
|
||||
52
src/App.vue
52
src/App.vue
@ -1,53 +1,13 @@
|
||||
<template>
|
||||
<template v-if="!isFullpage">
|
||||
<div>
|
||||
<HeadMenu @open-login-form="showLoginForm = true" @open-register-form="showRegisterForm = true" />
|
||||
<div class="contain">
|
||||
<router-view class="routerView" />
|
||||
<Feedback/>
|
||||
<Footer/>
|
||||
</div>
|
||||
</div>
|
||||
<Login :isVisible="showLoginForm" @close-login-form="showLoginForm = false" />
|
||||
<Register :isVisible="showRegisterForm" @close-register-form="showRegisterForm = false" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<router-view class="routerView" />
|
||||
</template>
|
||||
<DynamicLayout>
|
||||
<router-view />
|
||||
</DynamicLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import HeadMenu from '@/views/HeadMenu.vue';
|
||||
|
||||
import Footer from '@/views/Footer.vue';
|
||||
import Login from '@/components/login.vue';
|
||||
import Register from '@/components/register.vue';
|
||||
import Feedback from './components/floatingMenu.vue';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const showLoginForm = ref(false);
|
||||
const showRegisterForm = ref(false); // 定义控制注册组件显示的变量
|
||||
const fullpageRef = ref<boolean>(true);
|
||||
|
||||
// 计算属性：根据当前路由的 meta 决定是否显示页头页脚
|
||||
const isFullpage = computed(() => {
|
||||
return route?.meta?.isFullpage || false;
|
||||
});
|
||||
|
||||
fullpageRef.value = isFullpage.value as boolean
|
||||
import DynamicLayout from '@/components/DynamicLayout.vue';
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.contain {
|
||||
min-height: calc(100vh - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.routerView {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
37
src/components/BasicLayout.vue
Normal file
37
src/components/BasicLayout.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div>
|
||||
<HeadMenu @open-login-form="showLoginForm = true" @open-register-form="showRegisterForm = true" />
|
||||
<div class="contain">
|
||||
<slot />
|
||||
<Feedback/>
|
||||
<Footer/>
|
||||
</div>
|
||||
</div>
|
||||
<Login :isVisible="showLoginForm" @close-login-form="showLoginForm = false" />
|
||||
<Register :isVisible="showRegisterForm" @close-register-form="showRegisterForm = false" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import HeadMenu from '@/views/HeadMenu.vue';
|
||||
|
||||
import Footer from '@/views/Footer.vue';
|
||||
import Login from '@/components/login.vue';
|
||||
import Register from '@/components/register.vue';
|
||||
import Feedback from '@/components/floatingMenu.vue';
|
||||
|
||||
const showLoginForm = ref(false);
|
||||
const showRegisterForm = ref(false); // 定义控制注册组件显示的变量
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.contain {
|
||||
min-height: calc(100vh - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.routerView {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
src/components/DynamicLayout.vue
Normal file
22
src/components/DynamicLayout.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<component :is="currentLayout">
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watch, shallowRef } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const currentLayout = shallowRef(null);
|
||||
|
||||
watch(route, async(newVal)=>{
|
||||
if (typeof newVal?.meta?.isFullpage == 'undefined' || newVal?.meta?.isFullpage == false) {
|
||||
const layout = await import('@/components/BasicLayout.vue');
|
||||
currentLayout.value = layout.default;
|
||||
} else {
|
||||
currentLayout.value = { template: '<slot />' };
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -56,9 +56,9 @@ window.onscroll = function () {
|
||||
// 获取浏览器卷去的高度
|
||||
let high = document.documentElement.scrollTop || document.body.scrollTop; //兼容各浏览器
|
||||
if (high >= 900) {
|
||||
backToTop.value.style.display = "block";
|
||||
backToTop.value && (backToTop.value.style.display = "block")
|
||||
} else {
|
||||
backToTop.value.style.display = "none";
|
||||
backToTop.value && (backToTop.value.style.display = "none")
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -67,8 +67,6 @@ const refreshCaptcha = async () => {
|
||||
const res = await GetVerifyCode({ verify_token: verify_token.value });
|
||||
if (res && res.status === 200) {
|
||||
captchaUrl.value = `https://mall.gpxscs.cn/api/admin/shop/shop-base-config/image?verify_token=${verify_token.value}`;
|
||||
} else {
|
||||
console.log("获取图形验证码失败", res);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -62,7 +62,8 @@ export default defineConfig({
|
||||
,
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
'vue': 'vue/dist/vue.esm-bundler.js'
|
||||
},
|
||||
},
|
||||
// build: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user