А как вы делаете модальные окна на Vue.js?

Question

[Даниил Попов]

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

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

От плагина жду три основных вещи:
1. Возможность отображать компоненты;
2. Общение с родителем через пропсы и ивенты;
3. Возможность отключить предустановленные стили.

Понравилось как работает v-tooltip (компонент v-popover) и хотелось бы найти аналог

Пример кода

<v-popover
  offset="16"
>
  <!-- This will be the popover target (for the events and position) -->
  <button class="tooltip-target b3">Click me</button>

  <!-- This will be the content of the popover -->
  <template slot="popover">
    <input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
    <p>
      {{ msg }}
    </p>

    <!-- You can put other components too -->
    <ExampleComponent char="=" />
  </template>
</v-popover>

Comments

[WStanley]

Я использую бутстраповские модалки, сам их делаю компонентом и никаких проблем со стилями и размерами, пропсами и инвентами нету

Answer 1

[Михаил]

Как-то давно пришёл к выводу что лучше делать динамические модалки, т.е. просто регистрировать любой компонент, и пихать его в DOM

сам компонент

export default {
  name: 'modal-hello',
};

App.vue

<modal-root>
  сюда будут рендериться модалки
</modal-root>

и где-нибудь просто открывать

mounted() {
  this.$modal.open('modal-hello');
}

таким образом все модалки будут на уровне body, и не будут засорять браузер если их не вызывали, особенно если в них дофига компонентов, а не просто ok/no.

Answer 2

[segio_tt]

Используйте vuetify

Comments

[Даниил Попов]

Хороший совет, но иногда нужны только модальные окна и завозить только ради этого vuetify, согласитесь, неоправданно

Answer 3

[Stas Sych]

Vuejs-modal
Лучшее из того, что есть
Давно использую
Работает исправно , можно подать в него как название комплекта , так и динамический импорт и просто строку html . По стилизации минимально ! То что нужно .

Comments

[marsdenden]

Ссылочку можно?

[Даниил Попов]

marsdenden, судя по всему, речь об этом vue-js-modal

Answer 4

[steelpear]

Я использую Vuetify - для построения диалогов там более, чем достаточный функционал.