Можно ли иметь один модальный компонент (не отображается по умолчанию) внутри каждого элемента списка в vuejs? - PullRequest
Новая
       19

Можно ли иметь один модальный компонент (не отображается по умолчанию) внутри каждого элемента списка в vuejs?

0 голосов
/ 08 июня 2018

В нашем приложении есть несколько списков предметов, где у каждого предмета есть кнопка для открытия модала.

Модал всегда одинаков для данного списка, но представленная информация зависит от предмета.

Сейчас у меня есть два решения:

1.Один модал на список

Модал присутствует только один раз в компоненте List

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

Это первое решение приносит некоторые странные механизмы для выделения выделенной информации в модальной области.И мне не очень нравится этот подход, потому что он вводит некоторое повторение. 

// example pseudo markup
<div v-for="item in items">
    <a @click="selected = item"></a>
</div>

<Modal data="selected"/>

2.Один модальный элемент за элемент

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

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

// example pseudo markup
<div v-for="item in items">
    <ButtonWithModal :info="item"/>
</div>

Вопрос

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

1 Ответ

0 голосов
/ 09 июня 2018

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

Трудно сказать, основываясь на том, что не так много информации о типе данных и о том, насколько они модальны.Конечно, вы можете использовать разные модалы и по-прежнему повторно использовать компоненты: 

<SomeModal>
  <ModalInputWithErrors v-model="some-data" />
</SomeModal

<AnotherModal>
  <ModalWithWithErrors v-model="another-data"
</AnotherModal />

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

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

...