程序人生网站首页 程序人生

新建项目表单的模态框样式(laravel11+inertia+breeze实现tailwind模态框)

发布时间：2024-11-02 14:10:02编辑：雪饮阅读（）

之前咱们创建项目表单是在一个单独的组件一个单独的路由页面中。

如果要处理为模态框中，首先我们调整下之前的项目详情组件Project.vue：

这样调整主要是为了方便看到我们最新创建项目的id，以确保我们调整后的模态框的方式创建的是最新的数据，以此来有效验证创建是否成功是在当前情况下比较方便的。

那么如果是要将之前的表单做到模态框里面，则我们也就是说要在项目列表当前页面就要有包含之前那个表单中的元素组件，以及这里如果是模态框的形式，那么创建项目的按钮就不该是直接跳转，而且普通按钮。

那么首先按钮的实现，我们也并且优化下按钮的样式，之前的样式太丑了。

那么按钮的实现：

import PrimaryButton from '@/Components/PrimaryButton.vue';

引入到Index.vue中

并将原来的link形式修改为这样

<PrimaryButton class="ms-4" @click="createProject">Create Project</PrimaryButton>

同样我们为了更直观的看到创建新项目通过模态框的是否成功，可以在这个项目列表界面中也展示总项目数

Project list (total:{{projects.length}})

那这里可以看到我们的创建项目调用了createProject方法，则其实现如

function submit() {
    router.post(`/project`, {
        _method: 'patch',
        avatar: form.avatar,
        name:form.name
    },{
        onSuccess:()=>{
            state.state=false;
        }
    })
}
const create=()=>{
    submit();

}

这里可以看到submit被直接调用了，而不是通过表单元素去响应onsubmit的形式。

这是因为在模态框里面可能和普通的独立组件页面中不同，这里发现的情况就是好像上传进度丢失，而且提交并没有进入post，而且当前项目列表页面进行重载，那么也就是说form的action也没有。

所以这里我才进行了二次加工。关闭模态框则在router.post的option里面的onSuccess去完成。

也就是说你这里不写onSuccess，那么实际上只要请求完成了，前端已经自动重新响应了。而且是局部的302跳转，这就是inertia的神奇之处。

那么接下来还需要在项目列表Index.vue中实现最核心的模态框了

<template v-if="state.state">
    <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>

        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                    <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start">

                            <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                                <div class="mt-2">
                                    <section>
                                        <header>
                                            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                                Project Information
                                            </h2>

                                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                                                Update your account's Project information and email address.
                                            </p>
                                        </header>

                                        <form
                                            @submit.prevent="submit"
                                            class="mt-6 space-y-6"
                                            enctype="multipart/form-data"
                                            method="post"
                                            id="projectEdit"
                                        >
                                            <div>
                                                <InputLabel for="name" value="Name" />

                                                <TextInput
                                                    id="name"
                                                    type="text"
                                                    class="mt-1 block w-full"
                                                    v-model="form.name"
                                                    required
                                                    autofocus
                                                    autocomplete="name"
                                                />
                                                <InputError class="mt-2" :message="form.errors.name" />
                                                <input type="file" @input="form.avatar = $event.target.files[0]" />
                                                <progress v-if="form.progress" :value="form.progress.percentage" max="100">
                                                    {{ form.progress.percentage }}%
                                                </progress>
                                            </div>
                                        </form>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                        <button type="button" class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto" @click="create">Create</button>
                        <button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto" @click="cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>