Use type Component as vue component in settings-panel/sub-pages/index.ts

This commit is contained in:
timongh 2023-02-09 13:35:02 +08:00
parent 4e875aaffd
commit 8c306f37db
2 changed files with 10 additions and 9 deletions

View File

@ -56,8 +56,8 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import type { Component, PropType } from 'vue'
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import type { Executable, ImportedVueComponent } from '@/core/common-types'
import { ascendingSort } from '@/core/utils/sort' import { ascendingSort } from '@/core/utils/sort'
import VIcon from '@/ui/icon/VIcon.vue' import VIcon from '@/ui/icon/VIcon.vue'
import VPopup from '@/ui/VPopup.vue' import VPopup from '@/ui/VPopup.vue'
@ -76,7 +76,7 @@ export default defineComponent({
tags: [], tags: [],
selectedTagName: '', selectedTagName: '',
subPages, subPages,
selectedSubPage: null, selectedSubPage: null as PropType<Component | null>,
selectedSubPageOpen: false, selectedSubPageOpen: false,
selectedSubPageTrigger: null, selectedSubPageTrigger: null,
} }
@ -107,7 +107,7 @@ export default defineComponent({
const { filter } = (this.tags as SettingsTag[]).find(t => t.name === tag.name) const { filter } = (this.tags as SettingsTag[]).find(t => t.name === tag.name)
this.$emit('change', filter) this.$emit('change', filter)
}, },
async openSubPage(e: MouseEvent, component: Executable<ImportedVueComponent>) { async openSubPage(e: MouseEvent, component: Component) {
if (this.selectedSubPage === component) { if (this.selectedSubPage === component) {
this.selectedSubPageOpen = !this.selectedSubPageOpen this.selectedSubPageOpen = !this.selectedSubPageOpen
return return

View File

@ -1,34 +1,35 @@
import type { Executable, ImportedVueComponent } from '@/core/common-types' import type { Component } from 'vue'
import { defineAsyncComponent } from 'vue'
export interface SubPage { export interface SubPage {
name: string name: string
displayName: string displayName: string
component: Executable<ImportedVueComponent> component: Component
icon: string icon: string
} }
export const subPages: SubPage[] = [ export const subPages: SubPage[] = [
{ {
name: 'userComponentsManage', name: 'userComponentsManage',
displayName: '组件', displayName: '组件',
component: () => import('./UserComponentsPage.vue').then(m => m.default), component: defineAsyncComponent(() => import('./UserComponentsPage.vue')),
icon: 'mdi-cube-scan', icon: 'mdi-cube-scan',
}, },
{ {
name: 'userPluginsManage', name: 'userPluginsManage',
displayName: '插件', displayName: '插件',
component: () => import('./UserPluginsPage.vue').then(m => m.default), component: defineAsyncComponent(() => import('./UserPluginsPage.vue')),
icon: 'mdi-puzzle-outline', icon: 'mdi-puzzle-outline',
}, },
{ {
name: 'customStylesManage', name: 'customStylesManage',
displayName: '样式', displayName: '样式',
component: () => import('./UserStylesPage.vue').then(m => m.default), component: defineAsyncComponent(() => import('./UserStylesPage.vue')),
icon: 'mdi-tune', icon: 'mdi-tune',
}, },
{ {
name: 'about', name: 'about',
displayName: '关于', displayName: '关于',
component: () => import('./AboutPage.vue').then(m => m.default), component: defineAsyncComponent(() => import('./AboutPage.vue')),
icon: 'mdi-information-outline', icon: 'mdi-information-outline',
}, },
] ]