groog
@groog
Я только учусь

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

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

Сейчас пользуюсь 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>

  • Вопрос задан
  • 937 просмотров
Пригласить эксперта
Ответы на вопрос 4
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
Как-то давно пришёл к выводу что лучше делать динамические модалки, т.е. просто регистрировать любой компонент, и пихать его в DOM

сам компонент
export default {
  name: 'modal-hello',
};


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


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

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


таким образом все модалки будут на уровне body, и не будут засорять браузер если их не вызывали, особенно если в них дофига компонентов, а не просто ok/no.
Ответ написан
@art055
Используйте vuetify
Ответ написан
@StasSych
Developer
Vuejs-modal
Лучшее из того, что есть
Давно использую
Работает исправно , можно подать в него как название комплекта , так и динамический импорт и просто строку html . По стилизации минимально ! То что нужно .
Ответ написан
@steelpear
Я использую Vuetify - для построения диалогов там более, чем достаточный функционал.
Ответ написан
Ваш ответ на вопрос

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

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