You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.2 KiB
123 lines
3.2 KiB
<template> |
|
<div> |
|
<div class="app-bg"></div> |
|
|
|
<!-- <div class="safe-area-inset-bottom"> |
|
<div class="tabbar-height-inset-bottom"> |
|
<router-view /> |
|
</div> |
|
</div>--> |
|
|
|
<router-view v-slot="{ Component }"> |
|
<keep-alive :include="componentNameList"> |
|
<component :is="Component" class="x-component" /> |
|
</keep-alive> |
|
</router-view> |
|
|
|
<x-footer></x-footer> |
|
|
|
<!-- 未来可能需要封装组件--> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { getCurrentInstance, ref, reactive, onMounted } from "vue"; |
|
import { useRoute, useRouter } from "vue-router"; |
|
import { provide, inject } from "vue"; |
|
import { $commonService } from "@/services/framework/dependency-injection-service"; |
|
import { $commonService0, testFun } from "@/app-import"; |
|
|
|
// console.log(useRouter()); |
|
const $route = useRoute(); |
|
const router = useRouter(); //用来进行路由跳转 |
|
|
|
console.log("window.$commonService", window.$commonService); |
|
// 推荐使用 $commonService |
|
console.log($commonService.$i18nService.getI18nLocale()); |
|
|
|
// test 在单独js中引用公共服务 |
|
testFun(); |
|
|
|
// debugger |
|
const title = ref(""); |
|
|
|
// 生命周期 |
|
// 组件被挂载时 |
|
onMounted(() => {}); |
|
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
|
// 获取缓存组件 |
|
const componentNameList: any = ref([]); |
|
getKeepAlive(router.options.routes as object[]); |
|
|
|
console.log("componentNameList", componentNameList); |
|
|
|
function getKeepAlive(routesArr: object[]) { |
|
// console.log(routesArr); |
|
routesArr.forEach((item: any) => { |
|
if ( |
|
!item.meta || |
|
item.meta.notKeepAlive === undefined || |
|
item.meta.notKeepAlive === false |
|
) { |
|
// console.warn("item", item); |
|
// console.warn("item.component", item.component); |
|
if (item.component) { |
|
const name = getComponentName(item.component.toString()); |
|
name && |
|
componentNameList.value.push( |
|
getComponentName(item.component.toString()) |
|
); |
|
} |
|
} |
|
// 是否有子级 |
|
if (item.children) { |
|
getKeepAlive(item.children); |
|
} |
|
}); |
|
} |
|
|
|
// 获取组件名 |
|
function getComponentName(str: string) { |
|
const hasLegacy = str.includes("legacy"); |
|
const regex = hasLegacy ? /\/(.+?)-legacy\./ : /\/([^\/]+)\.(?=[^\/]*$)/; |
|
const match = regex.exec(str); // 执行正则匹配 |
|
if (match) { |
|
const name = match[1]; // 获取第一个捕获组的值 |
|
return name; |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import "src/styles/index"; |
|
body { |
|
min-height: 100vh; |
|
font-size: 16px; |
|
-webkit-font-smoothing: antialiased; |
|
//background: #9c26b0; |
|
|
|
.app-bg { |
|
position: fixed; |
|
z-index: -1; |
|
width: 100vw; |
|
height: 100vh; |
|
// 海信内页渐变 |
|
background: linear-gradient( |
|
0.44deg, |
|
#e5effb 2.48%, |
|
#e5f0f5 88.5%, |
|
#e9f4f9 90.37%, |
|
#f7fdff 100.97% |
|
); |
|
//background: red; |
|
} |
|
} |
|
// 延长自动填充背景色的时间 为达到修改自动填充时input的背景色问题 |
|
input:-webkit-autofill, |
|
input:-webkit-autofill:hover, |
|
input:-webkit-autofill:focus, |
|
input:-webkit-autofill:active { |
|
-webkit-transition-delay: 111111s; |
|
-webkit-transition: color 11111s ease-out, background-color 111111s ease-out; |
|
} |
|
</style>
|
|
|