Vue 3. Как лучше встроить модальное окно для каждого элемента из списка?

Question

[alexsmirnovdotcom]

Допустим имеется таблица с большим количеством элементов, кликнув на любой из них открывается модальное окно с деталями этого элемента (допустим список счетов и по клику на каждый открывается форма редактирования счета).

Компонент с формой редактирования: модальное окно, и сама форма, в пропсы которой передается ID документа и уже сама форма подгружает нужные данные.

Как лучше реализовать такой механизм?
1) В каждой строке использовать компонент (например ссылка или кнопка), в котором будет вставлен компонент модального окна с формой и которое будет открываться при клике на компонент.
Плюсы: Возможность вызывать неограниченное количество разных модалок, они будут просто накладываться поверх друг друга.
Минусы: В каждой строке таблицы будет куча вложенных компонентов, которые грузят память и процессор и которые вообще никак не используюсят пока пользователь не кликнет на кнопку / ссылку на конкрентной строке.

2) Вставить компонент модального окна с формой допустим в layout файл который используется на всех страницах, и работать с ним через store (Pinia или Vuex, не важно). В таблице при клике на (кнопку / ссылку) элемента, будут просто меняться данные в сторе, а в модальном окне эти изменения соответственно будут отслеживаться.
Плюсы: Один единственный компонент, который просто меняет свое состояние в зависимости от значений в глобальном хранилище.
Минусы: Сложно реализовать множественное переиспользование этого компонента.

Какой вариант по вашему лучше и почему?
Как можно реализовать множественное использование одного компонента, если его состояние зависит от глобального хранилища? (Например в форме редактирования счета, есть список связанных счетов. Как открыть их, не закрывая текущее модальное окно и не меняя его содержимое? Тоесть как открыть еще одно такое модальное окно с формой другого документа?)

Возможно есть еще какие либо варианты? Буду рад если поделитесь тем, как вы это реализуете или ссылками на материалы по теме.
Вопрос не про конкретную реализацию, а про то как правильно огранизовывать такие моменты, что бы можно было переиспользовать тяжелые компоненты и при этом не тратить большое количество ресурсов на бесконечную вложенность.

Answer 1

[misterobot404]

Если в каждом элементе списка используется компонент модалки, как правило, он никогда не дублируется, а инициализируется каждый раз новым стейтом при нажатии на элемент списка. Но у вас редкий случай, нужно одновременно открывать несколько таких модалок, решение: используйте массив динамических компонентов.

При нажатии на элемент в списке, в массив компонентов заносится элемент с нужным названием и стейтом для инициализации, при закрытии модалки можете перехватывать событие и удалить компонент из этого массива.

<component
      v-for="modal in array_of_modal"
      :is="modal.component_name"
      v-bind="modal.props">
  </component>

 array_of_modal: [
        {
          component_name: "component_name_1",
          props: {}
        },
        {
          component_name: "component_name_2",
          props: {}
        }
      ]

Answer 2

[Сергей delphinpro]

Вы сами определили плюсы и минусы обоих подходов.

Множественное переиспользование общего компонента решается массивом данных в сторе.
Грубо так:

store = {
  modals: [
    // {}  - объект с данными для модалки
  ];
}

<template v-for="modal in store.modals">
  <my-modal-component v-bind="modal"/>
</template>

Answer 3

[Adamos]

Модальное окно, по определению - перехватывает фокус и блокирует обращение к другим элементам, пока не будет закрыто. У вас явно что-то другое... и вместо вызова кучи перекрывающих друг друга модалок имеет смысл подумать над элементом интерфейса, в котором будет список вызванных форм, например, с возможностью закрыть каждую. Без всей лишней и ненужной в этом случае атрибутики модального окна.

Вот, например, в виндах последних версий вместо кучи всплывающих оповещений есть виджет, в котором они все отображаются, когда у вас дойдут до него руки. Что-то подобное, но, конечно, открывающееся автоматически, когда вы вызвали очередную форму.

Comments

[alexsmirnovdotcom]

Имелась ввиду ситуация, когда например у нас есть допустим счет, и в нем есть такой же мини список, например прошлых счетов этого контрагента (объединенных одним договорм допустим).
И нам нужно во время работы с текущим счетом, открыть другой счет, не закрывая текущий.
Открыли еще один документ сверху, что-то посмотрели / поработали, закрыли.
И тот документ который уже был открыт до этого так и должен остаться открытым и никак не измениться / загрузиться заново.

Или в списке пользователей, открыли профиль в модалке, а у него например есть ссылка на руководителя которого тоже нужно открыть просто поверх текущего, а не вместо него.

Дело не в фокусе, он как раз и будет только у самой вернхей модалки. Но предыдущие не должны закрываться или терять свое состояние до тех пор пока оно не будет закрыто самим пользователем в порядке очереди.

[Adamos]

alexsmirnovdotcom, я представляю, что вы задумали, это довольно очевидно.
Просто предлагаю немного выйти из плоскости и подумать, не стоит ли сделать менее банальный и более удобный интерфейс. Если окно модально - можно с тем же успехом открыть его во весь экран. Если другие модальные окна должны быть дочерними - их можно заменить закрываемыми вставками в это же окно.

[alexsmirnovdotcom]

Adamos, если честно не очень пока представляю, что вы имеете ввиду под закрываемыми вставками?
Есть ли у вас визуальные / схематичные примеры, или в какую сторону гуглить?

[Adamos]

alexsmirnovdotcom, ну, форма же явно не займет все пространство, если открыть во все окно.
На оставшемся месте можно повторить все элементы модалки (заголовок, крестик для закрытия и форма) внутри div. И так несколько раз.

[alexsmirnovdotcom]

Adamos, Теперь понял.
Но мне кажется это гораздо сложнее будет в плане реализации адаптивности и в конечном итоге если нужны маленькие экраны или мобилки, то все равно все придет к модалкам.
Понятно, что для маленьких форм можно и так сделать, но если у каждой сущности большые формы, с табами и прочим, то проще сразу использовать модалки или теже самые табы (более глобальные)

[Adamos]

alexsmirnovdotcom, полноэкранное окно тоже легко делается адаптивным, а его элементы - сворачиваются в табы.
Я просто помогаю вам представить альтернативы топорному конструктору из ограниченного набора готовых элементов. Выбор все равно за вами.

Answer 4

[sourlyparadise]

как вариант..можно разместить компонент с модальным окном под таблицей, расшарить метод открытия через defineExpose и через него же передавать данные в окно, соответственно компонент получится всего один с динамическими данными.