通过超时 Flash 消息使用 laravel livewire 使文本消失答案

【问题标题】：Making text disappear using laravel livewire by timing out the flash message通过超时 Flash 消息使用 laravel livewire 使文本消失
【发布时间】：2022-01-04 20:34:58
【问题描述】：

我使用 laravel livewire 编写了一些代码，每当用户成功订阅或自愿加入我的网站时，就会出现一个模式。我尝试编写一些延迟模式的代码，但现在它只是让我的代码变慢，而不是让一些文本在几秒钟后消失。这是我在刀片文件上编写的代码。

  <div wire:loading.delay.short class="bg-white shadow" style="border-radius: 30px">
                @if (session()->has('subscription_message'))
                   @include('livewire.frontend.subscribe.success') 
                @endif
   </div>

我希望 subscription_message 消失，并且我还在另一个刀片文件中写入了 subscription_message。

<div wire:loading id="modal" class="alert alert-success" role="alert">
<h6 class="alert-heading">Thank you for your Subscription!ðŸ¤—</h6>
<p>{{ session('subscription_message') }}<i class="fa fa-check"></i></p>
<p class="mb-0">Kind Regards,<br>
    {!! 'Ben's Team' !!}
</p>
</div>

这是控制这两个刀片文件中所有代码的 livewire 组件。

 public function save()
{
    $this->validateForm();
    Subscription::create([
        'name' => $this->name,
        'email' => $this->email
    ]);
    $name = $this->name;
    $email = $this->email;

    $message = "Dear $name ! Thank you for subscribing with Us, Please check your email:($email) for more information.";
    $this->resetInput();

    // Sent Welcome email to subscriber
    Mail::to($email)->send(new WelcomeSubscriberNotification());

    session()->flash('subscription_message',$message);
}

我不知道如何使用户订阅后出现的 Flash 消息超时。任何人都可以帮助我解决这个问题吗？我想使用 livewire，但如果这不起作用，我愿意使用 Jquery 或 Javascript。

【问题讨论】：

标签： javascript php jquery laravel

【解决方案1】：

我明白了。在单击提交按钮后显示成功消息的刀片文件上，我只是添加了以下 js 代码。

刀片文件

<div id="modal" class="alert alert-success" role="alert">
<h6 class="alert-heading">Thank you for your Subscription!ðŸ¤—</h6>
<p>{{ session('subscription_message') }}<i class="fa fa-check"></i></p>
<p class="mb-0">Kind Regards,<br>
    {!! 'Ben's Team' !!}
</p>
</div>

JS 代码

var timeout = 3000; // in miliseconds (3*1000)
$('.alert').delay(timeout).fadeOut(300);</script>

【讨论】：