通过调度触发云杉烤面包机
Trigger Spruce Toaster via dispatch
所以我在我的 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);
})
它不起作用，有什么建议吗？
想通了。我已将 alpine 方法添加到根元素：
x-on:alert.window="$store.toasts.createToast($event.detail.message, $event.detail.type)"
现在要触发，我必须像这样在我的 livewire 组件上使用调度：
$this->dispatchBrowserEvent('alert', ['type' => 'success', 'message' => 'Files Uploaded']);
所以我在我的 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);
})
它不起作用，有什么建议吗？
想通了。我已将 alpine 方法添加到根元素：
x-on:alert.window="$store.toasts.createToast($event.detail.message, $event.detail.type)"
现在要触发，我必须像这样在我的 livewire 组件上使用调度：
$this->dispatchBrowserEvent('alert', ['type' => 'success', 'message' => 'Files Uploaded']);