Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим несколько простых в использовании библиотек оверлеев для отображения диалоговых окон и модальных окон так, как нам нравится в приложении Vue.
Vuedals
Это простая в использовании библиотека Vue, позволяющая нам добавлять модальные окна в наше приложение Vue. Чтобы использовать его, мы сначала устанавливаем его, запустив:
npm install --save vuedals
Затем мы добавляем его в наше приложение, регистрируя компонент, а затем ссылаемся на него в наших компонентах. Мы делаем это следующим образом:
main.js
:
import Vue from "vue"; import App from "./App.vue"; import { default as Vuedals } from "vuedals"; Vue.use(Vuedals); Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app");
App.vue
:
<template> <div id="app"> <button @click="show">Show</button> <vuedal></vuedal> </div> </template> <script> import { default as Vuedals, Component as Vuedal, Bus as VuedalsBus } from "vuedals"; export default { name: "App", components: { Vuedal }, methods: { show() { VuedalsBus.$emit("new", { name: "showing-the-money", component: { name: "foo-money", template: ` <div> <p>Money</p> </div> ` } }); } } }; </script>
В приведенном выше коде мы зарегистрировали плагин Vuedals
в main.js
. Затем мы добавляем компонент vuedal
в шаблон.
Как только мы это сделаем, мы можем вызвать метод VuedalBus.$emit
для создания нового модального окна с заданным шаблоном.
Чтобы программно закрыть модальное окно, мы можем вызвать метод this.$vuedals.close
. Мы можем передать data
для отправки слушателю vuedals:closed
.
Мы можем назвать это так:
this.$emit('vuedals:close', data);
Другие варианты включают size
, dismissable
, escapable
, title
, header
, onClose
и onDismiss
.
size
- размер модального окна, выраженный в виде строки. Возможные значения:
xs
: ширина 350 пикселейsm
: ширина 550 пикселейmd
: ширина 650 пикселейlg
: ширина 850 пикселейxl
: ширина 1024 пикселей
dismissable
- это логическое значение, включающее X для закрытия модального окна. escapable
позволяет нам разрешить закрытие модального окна, нажав клавишу Esc. title
- строка заголовка модального окна.
header
- это объект, который создает настраиваемый заголовок. Мы можем установить его на следующий объект:
header: {
component: 'header-component',
props: {
custom: 'Props'
}
}
Затем мы можем создать собственный header-component
для использования в качестве настраиваемого заголовка.
onClose
и onDismiss
наши обработчики событий, которые вызываются при отправке этих событий. У них обоих есть параметр data
, который передается при отправке событий.
vue-js-модальный
vue-js-modal
- еще один простой в использовании модальный компонент для приложений Vue. Для его установки запускаем:
npm install vue-js-modal --save
Тогда мы можем использовать его следующим образом:
main.js
:
import Vue from "vue"; import App from "./App.vue"; import VModal from "vue-js-modal"; Vue.use(VModal); Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app");
App.vue
:
<template> <div id="app"> <button @click="show">Show</button> <modal name="hello-world">hello, world!</modal> </div> </template> <script> export default { name: "App", methods: { show() { this.$modal.show("hello-world"); } } }; </script>
Нам просто нужно зарегистрировать плагин в main.js
. Затем мы можем вызвать this.$modal.show
, чтобы показать модальное окно. с заданным значением name
.
Также мы можем отправлять данные в модальное окно. Например, мы можем написать:
<template> <div id="app"> <button @click="show">Show</button> <modal name="hello-world" @before-open="beforeOpen">hello!</modal> </div> </template> <script> export default { name: "App", methods: { show() { this.$modal.show("hello-world", { name: "Jane" }); }, beforeOpen(event) { console.log(event.params.name); } } }; </script>
То, что мы передали, будет доступно в объекте event
обработчика beforeOpen
.
Этот пакет также имеет v-dialog
компонент, который является упрощенной версией модального окна. Это полезно для быстрого прототипирования, поскольку большинство параметров в нем установлено по умолчанию.
Чтобы воспользоваться им, мы пишем:
main.js
:
import Vue from "vue"; import App from "./App.vue"; import VModal from "vue-js-modal"; Vue.use(VModal, { dialog: true }); Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app");
App.vue
:
<template> <div id="app"> <button @click="show">Show</button> <v-dialog/> </div> </template> <script> export default { name: "App", methods: { show() { this.$modal.show("dialog", { title: "Alert!", text: "Hello", buttons: [ { title: "Woo", handler: () => { alert("Woot!"); } }, { title: "Close" } ] }); } } }; </script>
В приведенном выше коде мы создали диалоговое окно с двумя кнопками, кнопкой Woo и кнопкой закрытия.
При нажатии кнопки Woo отображается предупреждение, поскольку она запускает код в функции handler
. Кнопка «Закрыть» просто закрывает диалоговое окно.
Заключение
И Vuedals, и vue-js-modal
библиотеки - это простые в использовании модальные библиотеки, которые мы можем использовать для добавления модальных окон на нашу страницу в любом месте. Для работы им не нужно много настроек, но мы также можем настроить их по своему усмотрению.