Package Exports

vue-root-modals

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-root-modals) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue root modals

Это удобный менеджер модалок на promise.

Demo

Установка

yarn add vue-root-modals или npm i -d vue-root-modals

Быстрый старт

Vue root modals не предоставляет готовых модалок, он просто позволяет их удобно вызывать и работать с ними. Создадим простую модалку SimpleModal.vue

<template>
  <article class="modal">
    {{ text }}
  </article>
</template>

<script>
export default {
  name: "modal",
  props: {
    modalID: Number,
    resolve: Function,
    reject: Function,
    text: String,
  }
};
</script>

<style>
.modal {
  display: block;
  background-color: white;
  color: black;
  max-width: 200px;
  padding: 10px;
}
</style>

Дальше создадим файл в котором будем хранить нужные модалки, например modals.js.

import RootModals from "vue-root-modals"; // импортируем библиотеку
import SimpleModal from "./SimpleModal.vue"; // импортируем нашу модалку

const rootModals = new RootModals({
  SimpleModal // Создаем новый инстанс и передаем в него модалку
});

export default rootModals; // Экспортируем созданный инстанс

Дальше импортируем созданный нами modals.js в main.js и вызываем на нем Vue.use()

import modals from './modals.js'
Vue.use(modals)

new Vue({
  ...
})

Дальше импортируем компонент RootModal из библиотеки и определяем его в корне приложения

import { RootModal } from 'vue-root-modals';
import modals from './modals.js'
Vue.use(modals)

new Vue({
  components: {
    RootModal
  },
  template: `
    <div id="app">
      <root-modal></root-modal>
      <button @click="$modals.SimpleModal">Open Modal</button>
    </div>
  `
})

Все, теперь можно вызывать модалку из любого места с помощь this.$modals.SimpleModal({ options }). Все добавленные модалки генерируют метод из ключа который передали в обьект при инициализации new RootModals() и добавляются в $modals.

Все options попадают как пропсы в модалку. Так же в модалку попадает resolve, reject, modalID свойства. Благодаря этому с модалками можно работать через промисы.

const methods = {
  async openModal() {
    try {
      const response = await this.$modals.SimpleModal();
    } catch (err) {
      console.log(err);
    }
  }
}