Laravel使用构建flash消息组件虚拟用户.js和顺风CSS

在本教程中，我将介绍如何使用虚拟用户.js还有尾风。我将在一个全新的Laravel 5.8项目中使用它，但是您可以将它调整为在任何运行的项目中使用虚拟用户.js我们构建的组件将有一个\"危险\"主题和一个\"成功\"主题。您可以选择使用\"警告\"主题或任何其他您认为合适的主题来扩展它。先决条件n这是一个中间教程，因此我不打算介绍虚拟用户.js以及TailwindCSS或如何在项目中设置它们。我假设你已经按照他们的文件做了。我还删除了resources/js/app.js文件中的所有样板JavaScript，除了以下内容：n24el: \"#app\",5});n在我的routes/web.php文件中，我从以下内容开始：n1 3> 5 6 7{{ config(\"app.name\", \"Laravel\") }} 8>1112151617让我们开始n开始，让我们创建flash消息组件并将其注册到resources/js/app.js文件中。n23Vue.component(\"flash-message\", require(\"./components/FlashMessage.vue\").default);46el: \"#app\",7});n接下来，我们需要在欢迎视图中包含该组件，以便它显示在页面上。我通常将其插入到#app div底部附近。我们希望此组件安装在任何可能使用它的页面上。n345设置组件样式n让我们使用TailwindCSS完成一些基本样式设置。在设置组件样式时，我将使用静态消息和我们的\"危险\"主题，但稍后会有变量选项。下面的标记将把组件放在屏幕的右上角，在组件的右上角添加一个关闭图标，并提供一些像样的样式。n 1> 3

> 6> 713Oops! Something terrible happened...14

151617n使类和文本动态n如果您将bg-red-200 text-red-900类替换为bg-green-200 text-green-900，您将看到我们的基本\"成功\"样式。让我们根据组件上的message属性更改类和消息文本。我们需要在组件的底部添加以下内容：n 1> 3

5\"bg-red-200 text-red-900\":message.type===\"error\", 6\"bg-green-200 text-green-900\":message.type===\"success\", 7}\">>10>1114×1517{{ message.text }}18

192021222324export default {25data() {26return {27message: {28text: \"Hey! Something awesome happened.\",29type: \"success\",30},31};32},33};34n与组件通信现在，我想找到一种从组件外部设置消息的方法。我认为一个简单的Vue事件总线将非常适合这个目的。为此，我们需要将resources/js/app.js文件更新为以下内容：n34Vue.component(\"flash-message\", require(\"./components/FlashMessage.vue\").default);57el: \"#app\",8});n您以前可能在Vue组件中使用过自定义事件。我们将使用类似的语法来发出和侦听全局级别的事件：Bus.$emit(\"flash-message\")和Bus.$on(\"flash-message\")。现在我们已经设置了事件总线，让我们根据message属性有条件地呈现组件。我们可以通过在flash消息中添加一个v-if并将default message属性设置为null来实现这一点。n 1> 3

> 6\"bg-red-200 text-red-900\":message.type===\"error\", 7\"bg-green-200 text-green-900\":message.type===\"success\", 8}\">11>1215×1618{{ message.text }}19

202122232425export default {26data() {27return {28message: null,29};30},31};32n加载页面时，您不应该看到任何内容。举个例子，让我们添加一个触发器窗体组件，我们可以用它来演示如何将具有不同选项的事件发送到flashmessage组件。首先在resources/js/TriggerForm.vue创建组件并将其注册到resources/js/app.js文件中，然后将组件添加到欢迎视图中。n1// ...2Vue.component(\"flash-message\", require(\"./components/FlashMessage.vue\").default);3Vue.component(\"trigger-form\", require(\"./components/TriggerForm.vue\").default);4//...n3456n在表单组件中，我们需要添加输入、按钮和绑定到输入的数据属性。n 1 2 3> 6> 7Message Text 8 91519Message Type202123Success2426Error272830Send Message313233343536export default {37data() {38return {39message: {40text: \"Hey! Something awesome happened.\",41type: \"success\"42}43};44},45methods: {46sendMessage() {47// ...48}49}50};51n在sendMessage方法中，我们需要使用向flash消息组件侦听器发出事件的事件总线。从Vue组件发出事件时，第一个参数是事件的名称，第二个参数是事件侦听器需要的任何数据。在这里，我们将传递\"flash message\"作为事件名称，this.message作为第二个参数。我们还将在发出事件后重置消息。n1sendMessage() {2Bus.$emit(\"flash-message\", this.message);35text: null,6type: \"success\",7}8}n在我们的flash message组件中，我们需要为此事件设置一个侦听器和一个回调来处理它。我们先添加一个挂载的方法。最初，我们需要做的就是将组件内的消息设置为与事件传递的消息相等。n1mounted() {2Bus.$on(\"flash-message\",>4});5}n现在提交表单时，消息组件应该显示我们在表单中选择的文本和主题。n使组件消失n使关闭按钮工作，我们需要向按钮添加一个事件处理程序。n14>n接下来，我们将使组件在几秒钟后自动消失。使用setTimeout函数可以很容易地完成这一任务。n在我们的mounted函数中设置消息后，我们可以使用setTimeout在5秒钟后清除消息。如果您想让您的表单更快或更慢地消失，您可以更改该值。n1mounted() {2Bus.$on(\"flash-message\",>47}, 5000);8});9}n最初，此解决方案似乎工作正常，但如果您在5秒内提交了两次表单，则消息仍将在触发第一个事件的5秒内消失。为了解决这个问题，我们需要保存从调用setTimeout返回的计时器，并确保在下一个事件发生时重置它。我们可以很容易地做到这一点，通过更新我们的代码如下

Laravel使用构建flash消息组件虚拟用户.js和顺风CSS

CSS无头WordPress到底有多合适？

CSS制作带有粘性页眉和页脚的表格变得更容易了

CSS技巧编年史XXXX

CSS使用子资源完整性保护您的网站

CSS联合的可能性

CSS在开放细节元素上添加背景

CSS容器查询的聚宝盆

CSS target=blank

CSS查看WCAG 2.5.5以获得更好的目标尺寸

CSS Trickz：Netlify随需应变构建器的实验