attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 内链页面的加载逻辑优化

Browse Source
This commit is contained in:
wang_fan_w 2024-07-07 00:16:07 +08:00
parent 61311eae26
commit 65be2c2077
4 changed files with 52 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/internal-link-page/index.vue
View File

@ -1,6 +1,9 @@
<template>
<FillPage>
<iframe :src="link" class="iframe-size"> </iframe>
<div v-if="!isLoading" class="loading-page">
<div class="dc-loader"></div>
</div>
<iframe v-show="isLoading" :src="link" class="iframe-size" id="internalLinkPage"> </iframe>
</FillPage>
</template>
@ -10,6 +13,17 @@ import { useRoute } from "vue-router";
const route = useRoute();
const link = ref<string>(route.meta.link as string);
const isLoading = ref(false); // iframe是否加载完成
onMounted(() => {
let iframe = document.getElementById("internalLinkPage") as HTMLElement;
if (iframe) {
// 加载完成
iframe.onload = () => {
isLoading.value = true;
};
}
});
</script>
<style lang="scss" scoped>

4
src/lang/modules/enUS.ts
View File

@ -30,9 +30,9 @@ export default {
["uigradients"]: "uigradients",
["color-taking-tool"]: "color taking tool",
["grid-generator"]: "grid generator",
["vue-official-website"]: "vue",
["vite-official-website"]: "vite",
["external-page"]: "external link page",
["link-vue"]: "vue",
["link-vite"]: "vite",
["link-gitee"]: "gitee",
["link-juejin"]: "juejin",
["about-project"]: "about project",

4
src/lang/modules/zhCN.ts
View File

@ -31,9 +31,9 @@ export default {
["uigradients"]: "渐变配色",
["color-taking-tool"]: "取色工具",
["grid-generator"]: "网格生成器",
["vue-official-website"]: "vue官网",
["vite-official-website"]: "vite官网",
["external-page"]: "外链页面",
["link-vue"]: "外链 vue官网",
["link-vite"]: "外链 vite官网",
["link-gitee"]: "外链 gitee",
["link-juejin"]: "外链 掘金",
["not-power"]: "没有权限",

66
src/router/route.ts
View File

@ -398,45 +398,13 @@ export const dynamicRoutes: RouteRecordRaw[] = [
icon: "icon-menu"
},
children: []
},
{
path: "/external-links/inline-page/vue-official-website",
name: "vue-official-website",
component: () => import("@/views/external-links/inline-page/inline-page.vue"),
meta: {
title: "vue-official-website",
hide: false,
keepAlive: true,
affix: false,
link: "https://cn.vuejs.org/", // 链接
iframe: true, // 区分是否内链 true内链 false外链
roles: ["admin"],
icon: "icon-menu"
},
children: []
},
{
path: "/external-links/inline-page/vite-official-website",
name: "vite-official-website",
component: () => import("@/views/external-links/inline-page/inline-page.vue"),
meta: {
title: "vite-official-website",
hide: false,
keepAlive: true,
affix: false,
link: "https://www.vitejs.net/", // 链接
iframe: true, // 区分是否内链 true内链 false外链
roles: ["admin"],
icon: "icon-menu"
},
children: []
}
]
},
{
path: "/external-links/external-page",
name: "external-page",
redirect: "/external-links/external-page/link-gitee",
redirect: "/external-links/external-page/link-vue",
meta: {
title: "external-page",
hide: false,
@ -448,6 +416,38 @@ export const dynamicRoutes: RouteRecordRaw[] = [
icon: "icon-menu"
},
children: [
{
path: "/external-links/external-page/link-vue",
name: "link-vue",
component: () => import("@/views/external-links/external-page/external-page.vue"),
meta: {
title: "link-vue",
hide: false,
keepAlive: true,
affix: false,
link: "https://cn.vuejs.org/", // 链接
iframe: false, // 区分是否内链 true内链 false外链
roles: ["admin"],
icon: "icon-menu"
},
children: []
},
{
path: "/external-links/external-page/link-vite",
name: "link-vite",
component: () => import("@/views/external-links/external-page/external-page.vue"),
meta: {
title: "link-vite",
hide: false,
keepAlive: true,
affix: false,
link: "https://www.vitejs.net/", // 链接
iframe: false, // 区分是否内链 true内链 false外链
roles: ["admin"],
icon: "icon-menu"
},
children: []
},
{
path: "/external-links/external-page/link-gitee",
name: "link-gitee",