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 библиотеки - это простые в использовании модальные библиотеки, которые мы можем использовать для добавления модальных окон на нашу страницу в любом месте. Для работы им не нужно много настроек, но мы также можем настроить их по своему усмотрению.