组件模式 Alpine js。在 Laravel 10 中

问题描述 投票：0回答：2

我在 resources/views/components/modal.blade.php 中有这段代码。


@props([
    'name',
    'show' => false,
    'maxWidth' => '2xl'])

@php
$maxWidth = [
    'sm' => 'sm:max-w-sm',
    'md' => 'sm:max-w-md',
    'lg' => 'sm:max-w-lg',
    'xl' => 'sm:max-w-xl',
    '2xl' => 'sm:max-w-2xl',
][$maxWidth];
@endphp

<div
    x-data="{
        show: @js($show),
        focusables() {
            // All focusable element types...
            let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
            return [...$el.querySelectorAll(selector)]
                // All non-disabled elements...
                .filter(el => ! el.hasAttribute('disabled'))
        },
        firstFocusable() { return this.focusables()[0] },
        lastFocusable() { return this.focusables().slice(-1)[0] },
        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
    }"
    x-init="$watch('show', value => {
        if (value) {
            document.body.classList.add('overflow-y-hidden');
            {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
        } else {
            document.body.classList.remove('overflow-y-hidden');
        }
    })"
    x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
    x-on:close.stop="show = false"
    x-on:keydown.escape.window="show = false"
    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
    x-show="show"
    class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
    style="display: {{ $show ? 'block' : 'none' }};"
>
    <div
        x-show="show"
        class="fixed inset-0 transform transition-all"
        x-on:click="show = false"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
    >
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>

    <div
        x-show="show"
        class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
    >
        {{ $slot }}
    </div>
</div>

我尝试学习，但我不懂js。并且不明白它是如何工作的。 我知道我需要在代码中发送一个名字来打开模式，但我不知道如何打开它，而且我找不到要打开的信息，即使我尝试了一些人工智能，也没有人能给我打开模式以确认删除数据库中的客户端的代码，这是我寻找解决方案的最后一个资源。在这里，我给你我的 resources/views/clients/index.blade.php 是我想放置打开模式的删除按钮的地方。 提前谢谢大家。

<!-- Delete client modal -->
<x-modal name="'deleteClientModal' . $show => 'true'">
    <form method="POST" :action="route('clients.destroy', $clientToDelete ?? '')">
        @csrf
        @method('DELETE')
        <div class="px-6 py-4">
            <p class="text-lg text-gray-800">Are you sure you want to delete this client?</p>
        </div>
        <div class="px-6 py-4 bg-gray-100 text-right">
            <button type="button" class="inline-flex items-center px-4 py-2 bg-red-500 border border-transparent rounded-md font-semibold text-white text-sm tracking-widest hover:bg-red-600 active:bg-red-900 focus:outline-none focus:border-red-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150 mr-2" x-on:click="show = false">
                Cancel
            </button>
            <button type="submit" class="inline-flex items-center px-4 py-2 bg-green-500 border border-transparent rounded-md font-semibold text-white text-sm tracking-widest hover:bg-green-600 active:bg-green-900 focus:outline-none focus:border-green-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150" :disabled="formIsSubmitting">
                {{ __('Delete') }}
            </button>
        </div>
    </form>
</x-modal>

<!-- content layouts/app $slot -->

<x-app-layout>

<!-- tags -->

    <x-slot name="header">
        <div class="flex">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">

                {{ __('Clientes') }}

                <x-nav-link :href="route('clients.create')" :active="request()->routeIs('clients.create')" class="ml-10" >

                    {{ __('Nuevo') }}
`your text`
                </x-nav-link>`your text`
            </h2>
        </div>

<!-- alert success -->

        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                <strong class="font-bold">¡Éxito!</strong>
                <span class="block sm:inline">{{session('success')}}.</span>
            </div>
        @endif

<!-- alert error -->

        @if(session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                <strong class="font-bold">¡Éxito!</strong>
                <span class="block sm:inline">{{session('error')}}.</span>
            </div>
        @endif

    </x-slot>

<!-- pagination -->

        <div class="bg-blue-200 px-8">
            {{ $clients->links() }}
        </div>


<!-- list of clients -->
    @foreach ($clients as $client)
        <div class="py-5">
            <div class="max-w-6xl mx-auto sm:px-2 lg:px-4 ">
                <div class="h-max bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900">

                    <!-- client data -->

                        <div class="grid md:grid-cols-8 gap 10 ">
                            <span class="md:mt-5 mr-3 p-3 border border-black rounded-lg col-span-4 ">

                            <!-- butons update and delete-->







                                <div >
                                    <div class="grid grid-cols-2 gap-4  float-right">
                                        <a href="{{ route('clients.edit', $client->client_id) }}" >
                                            <button>
                                                <img class="w-5" src="{{ asset('images/icons/update.svg') }}" alt="Icon">
                                            </button>
                                        </a>




                                            <img class="w-5" src="{{ asset('images/icons/delete.svg') }}" alt="Icon">
                                    </div>
                                </div>


                            <span class="text-2xl underline underline-offset-2">
                                    {{$client->client_name}}
                                </span>
                                <br>
                                {{$client->client_ident}}
                                <br>
                                {{($client->client_street).(' , ').($client->client_pc).( ' , ').($client->client_city).( ' , ').($client->client_country)}}
                                <br>
                                {{($client->client_telephone). ('  ,  ') .($client->client_email)}}
                                <hr class="border bottom-1 border-black ">
                                {{$client->client_comments}}

                            </span>

                            <!-- boats  -->

                            <span class="mt-5  mr-3 p-3 border border-black rounded-lg  col-span-4">

                                @if($client->boats->isNotEmpty())

                                    <!-- butons update and delete-->

                                    <div >
                                        <div class="grid grid-cols-2 gap-4  float-right">
                                            <a href="{{ route('boats.edit', $client->client_id) }}" >
                                                <button>
                                                    <img class="w-5" src="{{ asset('images/icons/update.svg') }}" alt="Icon">
                                                </button>
                                  [tag:tag-name]          </a>
                                            <button >
                                                <img class="w-5" src="{{ asset('images/icons/delete.svg') }}" alt="Icon">
                                            </button>
                                        </div>
                                    </div>


                                    @foreach($client->boats as $boat)
                                        <span class="text-2xl underline underline-offset-2">
                                            {{ $boat->boat_name }}
                                        </span>
                                        <br>
                                        <br>
                                        {{ 'puerto: '. $boat->boat_marina }}
                                        <br>
                                        {{ 'tipo de barco: '. $boat->boat_type}}
                                        <hr class="border bottom-1 border-black ">
                                        {{ $boat->boat_comments}}
                                    @endforeach

                                @else
                                    <p>No tiene barco</p>
                                    <a href="{{ route('boats.create', ['client_id' => $client->client_id]) }}">Agregar barco</a>
                                @endif

                            </span>
                        </div>

                        <!-- projects of the boat -->

                        <div class="mt-5 border border-black rounded-lg mr-3 p-3">

                        <!-- butons update and delete-->

                            <div class="grid grid-cols-2 gap-4  float-right">
                                <a href="{{ route('clients.edit', $client->client_id) }}" >
                                    <button>
                                        <img class="w-5" src="{{ asset('images/icons/update.svg') }}" alt="Icon">
                                    </button>
                                </a>
                                <button>
                                    <img class="w-5" src="{{ asset('images/icons/delete.svg') }}" alt="Icon">
                                </button>
                            </div>

                            <span class="text-2xl underline underline-offset-2">
                                Proyectos
                            </span>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    @endforeach


    <script>
    window.addEventListener('open-modal', event => {
        if (event.detail === 'deleteClientModal') {
            window.deleteClientModal = true;
        }
    });
</script>

</x-app-layout>

我尝试学习，但我不懂js。并且不明白它是如何工作的。 我知道我需要在代码中发送一个名字来打开模式，但我不知道如何打开它，而且我找不到要打开的信息，即使我尝试了一些人工智能，也没有人能给我打开模式以确认删除数据库中的客户端的代码，这是我找到解决方案的最后一个资源。

laravel modal-dialog alpine.js
2个回答
0
投票

您需要发出一个名为 

open-modal
的事件并传递模态名称。

仔细阅读模态组件的源代码，您可以看到它正在侦听名为 

open-modal
的事件。

<div ...
    x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"

由此，我们可以得出它期望从事件中传入组件的名称。 

$event.detail == '{{ $name }}'
。如果名称匹配，则会将 
show
属性设置为 
true
。

渲染模态框的最终代码如下。确保模态的名称，例如。 “register”，匹配事件中的数据。

<button 
    type="button"
    @click="$dispatch('open-modal', 'register')">Register now!
</button>

<x-modal name="register">
    <!-- registration form... -->
</x-modal>
0
投票

Matt，我有同样的问题，尽管安装了 AlpineJS，但你提供的代码不起作用，你认为我还错过了其他依赖项吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.