GitHub/015
1
0
Fork 0
mirror of https://github.com/keven1024/015.git synced 2026-05-26 07:08:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(front): simplify component rendering in index.vue by using dynamic component approach

Browse Source
This commit is contained in:
keven1024
2025-05-20 11:40:29 +08:00
parent c63cec5d2b
commit bd0e2a3b5a
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
front/pages/index.vue
View File

@@ -1,15 +1,13 @@
<template>
<div class="flex flex-col gap-5 py-5 items-center w-full h-full">
<FileUploadView v-if="type === 'file'" />
<TextUploadView v-if="type === 'text'" />
<component :is="renderComponent" />
</div>
</template>
<script setup lang="ts">
import FileUploadView from '~/components/Upload/File/FileUploadIndexView.vue'
import TextUploadView from '~/components/Upload/TextUploadView.vue'
import FileUploadView from '~/components/Home/File/FileUploadIndexView.vue'
import TextUploadView from '~/components/Home/Text/TextUploadIndexView.vue'
import { isString } from 'lodash-es'
const route = useRoute()
const router = useRouter()
const type = computed(() => route?.query?.type)
@@ -18,4 +16,10 @@ onMounted(() => {
router.push({ query: { type: 'file' }, replace: true })
}
})
const renderList = [
{ key: 'file', component: FileUploadView },
{ key: 'text', component: TextUploadView },
]
const renderComponent = computed(() => renderList.find(item => item.key === type.value)?.component)
</script>