通过派单触发云杉烤面包机

Question

所以我在我的TALL项目https://github.com/zaxwebs/tailwind-alpine/blob/main/toast.html (代码如下)上尝试了这一点。

    <div class="min-h-screen flex justify-center items-center p-3">
        <div class="grid grid-cols-2 gap-4">
            <button
                x-data
                @click="$store.toasts.createToast('This is a test toast message.')"
                class="bg-gray-700 border-t-4 border-blue-600 text-white p-3"
            >
                Create Info Test Toast
            </button>
            <button
                x-data
                @click="$store.toasts.createToast('This is a test toast message.', 'success')"
                class="bg-gray-700 border-t-4 border-green-600 text-white p-3"
            >
                Create Success Test Toast
            </button>
            <button
                x-data
                @click="$store.toasts.createToast('This is a test toast message.', 'warning')"
                class="bg-gray-700 border-t-4 border-yellow-500 text-white p-3"
            >
                Create Warning Test Toast
            </button>
            <button
                x-data
                @click="$store.toasts.createToast('This is a test toast message.', 'error')"
                class="bg-gray-700 border-t-4 border-red-600 text-white p-3"
            >
                Create Error Test Toast
            </button>
        </div>
    </div>
    <div x-data class="absolute top-0 right-0 p-4 overflow-x-hidden">
        <template
            x-for="(toast, index) in $store.toasts.list"
            :key="toast.id"
        >
            <div
                x-show="toast.visible"
                @click="$store.toasts.destroyToast(index)"
                x-transition:enter="transition ease-in duration-200"
                x-transition:enter-start="transform opacity-0 translate-y-2"
                x-transition:enter-end="transform opacity-100"
                x-transition:leave="transition ease-out duration-500"
                x-transition:leave-start="transform translate-x-0 opacity-100"
                x-transition:leave-end="transform translate-x-full opacity-0"
                class="bg-gray-900 bg-gradient-to-r text-white p-3 rounded mb-3 shadow-lg flex items-center"
                :class="{
            'from-blue-500 to-blue-600': toast.type === 'info',
            'from-green-500 to-green-600': toast.type === 'success',
            'from-yellow-400 to-yellow-500': toast.type === 'warning',
            'from-red-500 to-pink-500': toast.type === 'error',
            }"
            >
                <svg
                    x-show="toast.type == 'info'"
                    class="w-6 h-6 mr-2"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                >
                    <path
                        fill-rule="evenodd"
                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                        clip-rule="evenodd"
                    />
                </svg>
                <svg
                    x-show="toast.type == 'success'"
                    class="w-6 h-6 mr-2"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                >
                    <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                        clip-rule="evenodd"
                    />
                </svg>
                <svg
                    x-show="toast.type == 'warning'"
                    class="w-6 h-6 mr-2"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                >
                    <path
                        fill-rule="evenodd"
                        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                        clip-rule="evenodd"
                    />
                </svg>
                <svg
                    x-show="toast.type == 'error'"
                    class="w-6 h-6 mr-2"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                >
                    <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                        clip-rule="evenodd"
                    />
                </svg>
                <div x-text="toast.message"></div>
            </div>
        </template>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/spruce@2.x.x/dist/spruce.umd.js"></script>
    <script>
        Spruce.store("toasts", {
            counter: 0,
            list: [],
            createToast(message, type = "info") {
                const index = this.list.length
                let totalVisible =
                    this.list.filter((toast) => {
                        return toast.visible
                    }).length + 1
                this.list.push({
                    id: this.counter++,
                    message,
                    type,
                    visible: true,
                })
                setTimeout(() => {
                    this.destroyToast(index)
                }, 2000 * totalVisible)
            },
            destroyToast(index) {
                this.list[index].visible = false
            },
        })
    </script>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>

单击脚本中包含的按钮可触发烤面包机通知，不会出现任何问题。我想要发生的是从我的livewire组件中分派一个浏览器事件，并在将触发通知的警告页面上添加一个侦听器。因此，在我的livewire组件中，我有以下内容：

$this->dispatchBrowserEvent('toast', ['type' => 'success', 'message' => 'Added Successfully']);

我在烤面包机通知脚本下面添加的内容如下

window.addEventListener('toast', event => {
        $store.toasts.createToast(event.detail.message, event.detail.type);
    })

它不工作，有什么建议吗？

Answer 1

我想通了。我已经在根元素中添加了高山方法：

x-on:alert.window="$store.toasts.createToast($event.detail.message, $event.detail.type)"

现在要触发，我必须在我的livewire组件上使用调度，如下所示：

$this->dispatchBrowserEvent('alert', ['type' => 'success', 'message' => 'Files Uploaded']);