Одна из проблем, с которой может столкнуться разработчик при использовании нескольких пакетов / библиотек, - это как заставить их работать вместе. Это может быть особенно сложно, если они созданы не друг для друга. В этой статье будет показано, как использовать компоненты Vue.js в модальных окнах Sweet Alert без зависимости от других пакетов, которые делают это за нас.
Я предполагаю, что вы установили в свой проект Vue.js и Sweet Alert 2. Если нет, взгляните на некоторые ссылки в конце, чтобы прочитать официальные руководства по Vue.js и SweetAlert2. Я не буду рассказывать, как их установить в этой статье.
А теперь самое интересное!
Шаг 1. Создайте однофайловый компонент Vue.js
Перейдите туда, где расположены ваши компоненты, и добавьте компонент, который вы хотели бы разместить внутри модального окна Sweet Alert 2. В этой статье мы создадим очень простой компонент заметок, где пользователь может добавить заметку в список.
Вы заметите, что есть два реквизита: title и noteProp. Это необходимо для проверки того, что наш компонент может получать нереактивные данные и использовать их внутри компонента из модального окна Sweet Alert 2.
Зарегистрируем этот компонент в нашем приложении. В зависимости от того, как вы запускаете Vue.js, может также потребоваться его регистрация в корневом экземпляре Vue.
Шаг 2. Создайте метод, который будет вызывать модальное окно Sweet Alert 2 с указанным вами компонентом.
Мы создадим метод, который монтирует выбранный нами компонент, а затем добавляет этот компонент в модальное окно Sweet Alert 2. Первым параметром будет имя отдельного файлового компонента, зарегистрированного в приложении на шаге 1. Вторым параметром будут данные реквизита, которые вы хотите передать в компонент.
Примечание. Для этого метода потребуется доступ к Vue и Sweet Alert 2.
Вы должны разместить этот код там, где вы считаете подходящим для вашего варианта использования. Поскольку я использую Laravel, я добавлю его в заголовок своего главного файла, который распространяется на все мое приложение. В главной голове я помещу его в файл _modals.js.
Шаг 3. Вызовите метод (ура)!
Несколько вещей, прежде чем вы это сделаете (оу).
- У вас должна быть возможность вызывать этот метод из тегов скрипта, других компонентов Vue или любого кода JavaScript, имеющего доступ к созданному вами методу.
- Экземпляр компонента Vue уничтожается, когда вы закрываете модальное окно, поэтому любые данные внутри, которые не были сохранены, будут потеряны. В зависимости от вашего варианта использования вам, возможно, придется подумать о способах сохранения данных внутри компонента либо с помощью пакета, такого как Vuex, либо путем выполнения запросов к базе данных внутри компонента и т. Д.
- Новый экземпляр компонента Vue монтируется каждый раз, когда вы вызываете метод.
- Внутри компонента Vue вы можете использовать метод Sweet Alert
close(), чтобы закрыть модальное окно.
В приведенном ниже коде показан пример вызова метода из базового сценария Javascript. Вы можете видеть, что второй переданный мною параметр содержит объект со значениями title и noteProp, которые мы обсуждали ранее.
Наконец-то ...
Обратите внимание, как он содержит заголовок и примечания, которые мы передали. Кроме того, с помощью Vue.js и Sweet Alert 2 вы можете сделать это модальное окно подходящим для любой темы или сделать его таким, как вы хотите.
Чтобы узнать больше о том, как начать работу с Vue.js и Sweet Alert, перейдите по этим ссылкам:
Vue.js: https://vuejs.org/v2/guide/
SweetAlert2: https://sweetalert2.github.io/
Если у вас есть какие-либо вопросы или что-то, что вы хотите прояснить, прокомментируйте ниже!
