Alpine.js

Question

如何在 Alpine.js 中自动隐藏即显消息？（假设我希望它在 4 秒后消失）

<div class="flex mx-auto justify-between left-0 bottom-0 z-40">
  <div class="flex mr-6 fixed left-8 bottom-8 overflow-hidden">
    <div class="bg-white rounded-lg border-gray-300 border p-4 shadow-xl">
      <div class="flex flex-row">
        <div class="mx-2">
          <svg width="24" height="24" viewBox="0 0 1792 1792" fill="#44C997" xmlns="http://www.w3.org/2000/svg">
            <path d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" />
          </svg>
        </div>
        <div class="pl-2 pr-6 max-w-lg">
          <span class="font-semibold">Successfully Saved!</span>
          <span class="block text-gray-500">Anyone with a link can now view this file</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用 x-init 添加 setTimeout 函数，该函数将在指定时间后像这样

更改 show 的值

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)">
  <h1>Welcome from alert</h1>
</div>

Alpine.js - 如何自动隐藏即显信息？

Alpine.js - how to auto hide a flash message?

javascript