Nuxt3/vue3 如何显示从头组件调用的模态组件？

Question

我正在使用 nuxt3/vue3。我很难根据我的标头组件调用模态。我只是将模态放在标题组件内，并使用

Teleport

函数根据

body

值将模态传送到

showModal

中，但它不起作用。这是我试过的

Header.vue

<template>
    <header class="header sticky-top">
        <nav class="container-fluid navbar-light bg-light">
                <div class="row justify-content-start">
                    <div class="col text-end p-3">
                        <button @click="showModal = true" type="button" class="btn">Register</button>
                    </div>
                </div>
                <Modal v-show="showModal"/>
        </nav>
    </header>
</template>

<script lang="ts">
import Modal from '~~/components/Modal.vue';

export default {
    components:{
        Modal
    },
    data(){
        return{
            showModal: false
        }
    },
}
</script>

DefaultLayout.vue

<template>
        <Header />
            <main class="p-4 ">
                <div class="container-fluid ">
                    <slot />
                </div>
            </main>
        <Footer />
</template>

<script lang="ts">
import Header from '~~/components/Header.vue';
import Footer from '~~/components/Footer.vue';
export default {
    components: {
        Footer,
        Header
    },
}
</script>

index.vue（这是我的主页）

<template>
    <default-layout>
        <Listings/>
    </default-layout>
</template>

<script lang="ts">
import DefaultLayout from '~~/layouts/DefaultLayout.vue';
import Listings from '~~/components/Listings.vue';
export default {
    setup() {

    },
    components: {
        DefaultLayout,
        Listings
    }
}
</script>

Modal.vue

<template>
    <Teleport to="body">
        <div class="modal show" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </Teleport>
</template>

<script lang="ts">
export default{
    props:{
        showModal: Boolean
    }
}
</script>

Answer 1

我目前的模态方法是将模态组件安装到全局应用程序模板中，并通过 Pinia 存储变量控制其可见性：

• 示例-app.vue
• 示例-商店
• 示例 - 模态

我使用 Composition API，但希望你能理解。

Answer 2

根据@ellrohir 的回复，我用 Pinia 和 Primevue 为 Nuxt 3 开发了一个简单的方法

我的商店文件 modalStore.ts

export const useModalStore = defineStore({
    id: 'modal-store',
    state: () => {
        return {
            displayModal: false,
            modalTitle: '',
            modalText: '',
        };
    },
    actions: {
        showModal(title: string, text: string): void {
            this.modalTitle = title;
            this.modalText = text;
            this.displayModal = true;
        },
        closeModal(): void {
            this.displayModal = false;
        },
    },
});

我的应用程序.vue

<script setup>
    const modalStore = useModalStore();
</script>
<template>
    <DialogLogin />
</template>

我的模态对话框登录

<script setup>
    const modalStore = useModalStore();
</script>

<template>
    <Dialog
        :header="$t('login')"
        v-model:visible="modalStore.displayModal"
        :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
        :style="{ width: '50vw' }"
        :position="position"
        :modal="true"
    >
        <!-- login component form -->
        <FormLogin />

        <!-- footer template -->
        <template #footer>
            <Button
                :label="$t('cancel')"
                icon="pi pi-times"
                @click="modalStore.closeModal()"
                class="p-button-text"
            />
        </template>
    </Dialog>
</template>

然后我用一个按钮激活它

        <Button
            label="Login"
            icon="pi pi-sign-in"
            @click="modalStore.showModal()"
        ></Button>