This commit is contained in:
sakuya 2021-08-02 22:53:21 +08:00
parent c97dde5a73
commit a1b2f5e091
5 changed files with 157 additions and 0 deletions

View File

@ -32,6 +32,15 @@ const routes = [{
icon: "el-icon-user",
},
component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
},
{
name: "report",
path: "/template/report",
meta: {
title: "分析报表",
icon: "el-icon-data-analysis",
},
component: () => import(/* webpackChunkName: "report" */ '@/views/template/report'),
}
]
}

View File

@ -0,0 +1,65 @@
<template>
<el-container>
<el-aside width="210px">
<el-container>
<el-header>
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
</el-header>
<el-main class="nopadding">
<el-tree ref="group" class="menu" node-key="id" :data="group"></el-tree>
</el-main>
</el-container>
</el-aside>
<el-container>
<el-header>
</el-header>
<el-main>
<el-card shadow="never">
<el-button @click="load('1')">异步加载1</el-button>
<el-button @click="load('2')">异步加载2</el-button>
<el-button @click="load(null)">卸载组件</el-button>
<sc-async-component :src="src"></sc-async-component>
</el-card>
</el-main>
</el-container>
</el-container>
</template>
<script>
import scAsyncComponent from './scAsyncComponent'
export default {
name: 'report',
components: {
scAsyncComponent
},
data() {
return {
src: null,
groupFilterText: '',
group: [
{
label: '系统运维概况',
},
{
label: '访客分析',
children: [
{
label: '地域分布',
},
{
label: '访客人像',
}
]
}
]
}
},
methods: {
load(src){
this.src = src
}
}
}
</script>

View File

@ -0,0 +1,20 @@
<template>
<div>1</div>
</template>
<script>
export default {
data(){
return {}
},
mounted() {
},
methods: {
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,20 @@
<template>
<div>2</div>
</template>
<script>
export default {
data(){
return {}
},
mounted() {
},
methods: {
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,43 @@
<template>
<component :is="componentFile"></component>
</template>
<script>
import { defineAsyncComponent, markRaw } from "vue"
export default {
props: {
src: { type: String, default: "" }
},
data(){
return {
componentFile: null
}
},
watch: {
src(){
this.render()
}
},
mounted() {
this.render()
},
methods: {
render(){
if(!this.src){
this.componentFile = null
return false
}
this.componentFile = markRaw(
defineAsyncComponent({
loader: () => import(`@/views/template/report/pages/${this.src}`),
delay: 0,
timeout: 10000,
loadingComponent: { template: '<div>加载中</div>' },
errorComponent: { template: '<div>加载失败</div>' }
})
)
}
}
}
</script>