Создайте модал для карты

Создайте модал для карты

16.03.2020 04:32:28 Просмотров 12 Источник

У меня есть страница с серией открыток. Каждая карта имеет кнопку, чтобы открыть модальный режим с некоторыми опциями. Какой способ будет более эффективным при обслуживании модального?

  1. Сохраните HTML-код модала на странице один раз. Выделите событие из каждой карты и загрузите единственный модал (передавая любые соответствующие данные, такие как идентификатор карты, который испустил событие).
  2. Имейте модал для каждой карты, но спрячьте его с v-if, чтобы он не отображался. Вряд ли модал будет открываться часто в любом случае.
  3. Что-то еще?

Спасибо вам за ваши мысли.

У вопроса есть решение - Посмотреть?

Ответы - Создайте модал для карты / Create a modal for a card

Gabriel Willemann

16.03.2020 05:36:10

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

<template>
  <div>
    <div v-for="card in cards">
      <span>Card: {{ card }} </span>
      <button @click="open(card)">Open</button>
    </div>
    <dialog open v-if="cardSelected">
      CardSelected: {{ cardSelected }}
      <button @click="close">Close</button>
    </dialog>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    cards: [1, 2, 3, 4, 5],
    cardSelected: null,
  }),
  methods: {
    open(card) {
      this.cardSelected = card;
    },
    close() {
      this.cardSelected = null;
    },
  },
};
</script>

Возможно, диалог должен быть компонентом differente.

Я думаю, что этот путь кажется мне вариантом 1.

ajobi

16.03.2020 08:23:46

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

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

Я бы также посоветовал вам взглянуть на portal-vue, который позволит вам использовать ваши диалоги как часть ваших карт, и в то же время визуализировать их там, где вам нужно в DOM. Например, в конце корневого элемента вашего приложения (или даже в вашем Родительском компоненте).

Закрыть X