html 如何防止alpine.js modal在每次刷新页面时显示

z2acfund 于 2022-12-02 发布在其他

关注(0)|答案(3)|浏览(168)

我在项目中使用alpine.js，我有一个可以很好地使用alpine.js的模式，我的问题是，每当你刷新页面时，它会显示一两秒钟（当页面加载时），然后消失。我不想在加载时看到它。在alpine.js中有什么方法可以解决这个问题吗？
我的代码

// Initialize data
<body x-data="{openModal: false}"
 :class="openModal ? 'overflow-hidden' : 'overflow-visible'"
>

// button
<button @click="openModal = true">
Open Modal
</button>
<!-- Modal -->
<div x-show="openModal">
<!-- content --> 
</div>
</body>

Html

来源：https://stackoverflow.com/questions/64430464/how-to-prevent-alpine-js-modal-from-showing-every-time-i-refresh-the-page

3条答案

按热度按时间

vdgimpew1#

您正在寻找x-cloak指示词。
这是一个非常简单的问题，当Alpine启动时，它会从组件中删除。
因此，在您的示例中，可以添加以下style（这将隐藏具有x-cloak属性的元素），并将x-cloak添加到Alpine.js组件（在本例中为body）。

<style>
[x-cloak] { display: none }
</style>
<body x-cloak x-data="{openModal: false}"
 :class="openModal ? 'overflow-hidden' : 'overflow-visible'"
>

// button
<button @click="openModal = true">
Open Modal
</button>
<!-- Modal -->
<div x-show="openModal">
<!-- content --> 
</div>
</body>

赞(0）回复(0）举报 2022-12-02

kzipqqlq2#

x-cloak是正确的答案！但是在更多的情况下为了安全起见，使用css的重要规则。

<style>
  [x-cloak] { 
      display: none !important;
   }
</style>

赞(0）回复(0）举报 2022-12-02

vsnjm48y3#

除了x-clock解决方案之外，另一个解决方案是将您想要控制的内容 Package 在带有x-if="true"参数的<template>标记中。
检查以下代码。

<template x-if="true">
  <div x-show="openModal">
    <!-- content --> 
  </div>
</template>

这是因为<template>元素在浏览器中默认是“隐藏”的，在Alpine有机会渲染x-if="true"并将其显示为描述here的文档之前，您不会看到<div>

赞(0）回复(0）举报 2022-12-02

我来回答

html 如何防止alpine.js modal在每次刷新页面时显示

3条答案

相关问题

热门标签

最新问答