Как предотвратить alpine.js модальный от показа каждый раз, когда я обновляю страницу

#javascript #html #alpine.js

#javascript #HTML #alpine.js

Вопрос:

я использую 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>

Ответ №1:

Вы ищете x-cloak директиву.

Это очень просто, оно удаляется из компонента при запуске Alpine.

Итак, в вашем случае вы можете добавить следующее style (которое скроет элементы с x-cloak атрибутом) и добавить x-cloak в свой Alpine.js компонент (в данном случае the 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>

1. Похоже, у меня это не работает. В моей голове у меня есть мой css, мой alpine.js тег сценария, а под ним я помещаю ваше предложение.

2. Nvm я понял, не заметил, что вы добавили x-cloak в body, мой плохой.

3. Да, возможно, я обновлю ответ, чтобы сделать его более понятным

Ответ №2:

x-cloak — это правильный ответ! Но на всякий случай в большем количестве случаев используйте важное правило css.

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

Ответ №3:

Помимо x-clock решения, другим решением является перенос содержимого, которым вы хотите управлять, в <template> тег с x-if="true" параметром.
Проверьте приведенный ниже код.

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

Это работает, потому <template> что элементы «скрыты» в браузерах по умолчанию, вы не увидите <div> , пока у Alpine не будет возможности отобразить x-if="true" и показать его, как описано в документах here