@lookingfor2

Почему скрипт не работает?

У меня есть список элементов, у каждого элемента есть кнопка, при нажатии на которую открывается небольшой блок с двумя кнопками, редактировать или удалить элемент

<li>
<p> Элемент 1 </p>
<div class="list__item-actions">
      сама кнопка
      <button @click="openHideBlock" class="show">Дейстие</button>
      скрытый блок
      <div v-show="opened" class="list__item-hideblock">
        <button @click="editTemplate">Редактировать</button>
        <button @click="deleteTemplate">Удалить</button> 
      </div>
    </div>
</li>


Мне нужно чтобы после того как мы открыли этот небольшой блок, при клике вне этого блока или на кнопку повторно, он скрывался
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
Nolis
@Nolis
it-гопник
ответ:
@click="openHideBlock" в этом методе ты должен менять this.opened = !this.opened
далее тебе лучше сделать ещё одну "подложку" из дива, чтобы ты смог при открытии попапа сделать сзади невидимую зону, по типу width: 100%, height: 100%, opacity: 0.
и при клике на эту зону вызывается всё тот же openHideBlock, который меняет состояние и закрывает popup
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы