AI_Painting_V2.0/src/views/home/index.vue

48 lines
1.2 KiB
Vue

<script setup>
import { computed, ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import display from './display/index.vue'
import { useDisplayStore } from '@/stores'
const route = useRoute()
const useDisplay = useDisplayStore()
const dialogBoxRef = ref(null)
const shouldShowDisplay = computed(() => route.path === '/home')
const loading = computed(() => route.query.loading ? false : (route.path === '/home'))
const Generate = computed(() => route.query.Generate || false)
const type = computed(() => route.query.type || 'Painting')
console.log(type.value)
watch(dialogBoxRef, (newRef) => {
if (newRef) {
useDisplay.setDialogBoxRef(newRef)
}
}, { immediate: true })
onMounted(() => {
if (dialogBoxRef.value) {
useDisplay.setDialogBoxRef(dialogBoxRef.value)
}
})
</script>
<template>
<div class="app-container">
<dialogBox ref="dialogBoxRef" :is-generate="shouldShowDisplay" :type="type" :generate="Generate" :loading="loading" />
<display :if="shouldShowDisplay" :type="type" :loading="loading" />
</div>
</template>
<style lang="less" scoped>
/* app-container 设置 */
.app-container {
width: 100%;
height: 100%;
position: relative;
background-color: #ffffff;
overflow: hidden;
}
</style>