// Include vuejs
<script type="text/javascript" src="./path/to/vue.min.js"></script>

// Include vuejs-dialog plugin
<link href="./path/to/vuejs-dialog.min.css" rel="stylesheet">
<script type="t/javascript" src="./path/to/vuejs-dialog.min.js"></script>
<script type="t/javascript" src="./path/to/vuejs-dialog-mixin.min.js"></script> // only needed in custom components

<script>
// Tell Vue to install the plugin.
window.Vue.use(VuejsDialog.main.default)
</script>

// установка через npm
npm i -S vuejs-dialog

// или

// установка через yarn
yarn add vuejs-dialog

// затем

// импортировать в проект
import Vue from 'vue';
import VuejsDialog from 'vuejs-dialog';
import VuejsDialogMixin from 'vuejs-dialog/dist/vuejs-dialog-mixin.min.js'; // только в пользовательских компонентах

// включить стиль по умолчанию
import 'vuejs-dialog/dist/vuejs-dialog.min.css';

// Сообщить Vue о необходимости установить плагин.
Vue.use(VuejsDialog);

// Если вы включаете через тег script и импортируете как внешний Webpack
// Конфигурация Webpack
{
    // ... другая конфигурация webpack
    externals: {
        // .. другие внешние элементы, если таковые имеются
        'vuejs-dialog': 'VuejsDialog'
    }
}

// затем

// Импортировать в проект
import Vue from 'vue';
import VuejsDialog из 'vuejs-dialog';

// Сообщите Vue о необходимости установки плагина.
Vue.use(VuejsDialog.main.default);

// Миксин доступен по адресу: VuejsDialog.mixin.default

// В любом месте вашего приложения Vuejs.

// Запустить диалоговое окно оповещения
this.$dialog.alert('Запрос выполнен!').then(function(dialog) ```
console.log('Closed');
});

// Trigger a confirmation dialog
this.$dialog
  .confirm('Пожалуйста, подтвердите, чтобы продолжить')
  .then(function(dialog) {
    console.log('Нажата кнопка "Продолжить"');
  })
  .catch(function() {
    console.log('Нажата кнопка "Отменить"');
  });

// VuejsDialog Methods are also available on the global vue
// Это позволяет использовать плагин внутри приложения ReactJs или просто любого приложения на JavaScript
// Просто включите vue, vuejs-dialog, попросите vue использовать плагин и всё:

Vue.dialog.alert('Запрос выполнен!').then(function(dialog) {
  console.log('Закрыто');
});

Vue.dialog
  .confirm('Пожалуйста, подтвердите, чтобы продолжить')
  .then(function(dialog) {
    console.log('Нажата кнопка "Продолжить"');
  })
  .catch(function() {
    console.log('Нажата кнопка "Отмена"');
  });

// Всякий раз, когда пользователь нажимает кнопку «Продолжить»,
// обещание, возвращённое вызовом диалога, будет разрешено с объектом диалога следующей формы:

{
    close: function | иногда | Метод, который можно использовать для закрытия диалогового окна, если оно находится в состоянии загрузки
    loading: function | иногда | Метод, используемый для остановки загрузчика диалогового окна
    node: DOMElement | иногда | Элемент DOM, к которому была привязана директива при срабатывании через директиву
    data: any | всегда | Данные, отправленные с положительным действием. Полезно в запросах или пользовательских компонентах, где у вас есть несколько кнопок продолжения
}

// Пример:

<button class="btn-danger"
        v-confirm="{
            loader: true,
            ok: okCallback,
            cancel: cancelcallback,
            message: 'Некоторое подтверждающее сообщение'"
>

okCallback: function (dialog) {
        dialog.loading(false) // остановить загрузчик (вам это не понадобится)
        dialog.close() // останавливает загрузчик и закрывает диалоговое окно
        dialog.node.className // === "btn-danger"
        dialog.data // === null
}

this.$dialog
  .prompt({
    title: "Давайте послушаем вас",
    body: "Что самое важное в жизни?",
  }, {
    promptHelp: 'Введите текст в поле ниже и нажмите "[+:okText]"'
  })
  .then(dialog => {
    // Срабатывает при нажатии кнопки «Продолжить»
    // Показать предупреждение с вводом пользователя в качестве сообщения
    this.$dialog.alert(dialog.data || '[пусто]')
  })
  .catch(() => {
    // Срабатывает, когда диалог закрывается пользователем

    console.log('Приглашение отклонено');
  });

this.$dialog
  .confirm("Если вы удалите эту запись, она исчезнет навсегда.", {
    loader: true // по умолчанию: false — когда установлено значение true, кнопка «Продолжить» показывает загрузчик при нажатии.
    // И объект диалога будет передан в обратный вызов then()
  })
  .then(dialog => {
    // Срабатывает при нажатии кнопки «Продолжить»

    // dialog.loading(false) // останавливает загрузчик кнопки «Продолжить»
    // dialog.loading(true) // снова запускает загрузчик кнопки «Продолжить»
    // dialog.close() // останавливает загрузчик и закрывает диалог

    // выполнить некоторые действия, такие как запрос ajax.
    setTimeout(() => {
      console.log('Действие удаления завершено ');
      dialog.close();
    }, 2500);
  })
  .catch(() => {
    // Срабатывает при нажатии кнопки отмены

    console.log('Удаление прервано');
  });

<button type="submit" v-confirm="">отправить</button>

// Обратные вызовы могут быть предоставлены
// Примечание: Если для «loader» установлено значение true, обратный вызов makeAdmin получит объект «dialog»
// Что полезно для закрытия диалога после завершения транзакции.
<button v-confirm="{ok: makeAdmin, cancel: doNothing, message: 'Пользователь получит права администратора. Сделать пользователя администратором?'}">Сделать администратором</button>

methods: {
    makeAdmin: function() {
        // Выполнить действия

    },
    doNothing: function() {
        // Ничего не делать или выполнять другие действия
    }
}

// При переборе пользователей
<button v-for="user in users"
        v-confirm="{
            loader: true,
            ok: dialog => makeAdmin(dialog, user),
            cancel: doNothing,
            message: 'Пользователю будут предоставлены права администратора. Сделать пользователя администратором?'}"
>
Сделать администратором
</button>

methods: {
    makeAdmin: function(dialog, user) {
        // Сделать пользователя администратором из бэкенда
        /* tellServerToMakeAdmin(user) */

        // По завершении закрыть диалоговое окно
        /* dialog.close() */

    },
    doNothing: function() {
        // Ничего не делать или что-то ещё
    }
}

// При переборе пользователей
<button v-for="user in users"
        :data-user="user"
        v-confirm="{
            loader: true,
            ok: makeAdmin,
            cancel: doNothing,
            message: 'Пользователю будут предоставлены права администратора. Сделать пользователя администратором?'}"
>
Сделать администратором
</button>

methods: {
    makeAdmin: function(dialog) {
        let button = dialog.node // node доступен только при срабатывании через директиву
        let user = button.dataset.user

        // Сделать пользователя администратором из бэкенда
        /* tellServerToMakeAdmin(user) */

        // По завершении закрыть диалоговое окно
        /* dialog.close() */

    },
    doNothing: function() {
        // Ничего не делать или что-то ещё
    }
}

// Поведение по умолчанию при использовании на ссылках
<a href="http://example.com" v-confirm="'Это приведёт вас на http://example.com. Действуйте осторожно'">Перейти на example.com</a>

let message = {
  title: 'Vuejs Dialog Plugin',
  body: 'Лёгкий, основанный на обещаниях диалог с оповещениями, приглашениями и подтверждениями'
};

this.$dialog.confirm(message);

// Параметры и опции

let message = "Вы уверены?";

let options = {
    html: false, // установите значение true, если ваше сообщение содержит HTML-теги. например: "Удалить <b>Foo</b> ?"
    loader: false, // установите значение true, если вы хотите, чтобы диалоговое окно показывало загрузчик после нажатия на "продолжить"
    reverse: false, // поменяйте местами кнопки (слева направо и наоборот)
    okText: 'Продолжить',
    cancelText: 'Закрыть',
    animation: 'zoom', // Доступно: "zoom", "bounce", "fade"
    type: 'basic', // скоро появится: 'soft', 'hard'
    verification: 'continue', // для жёсткого подтверждения пользователю будет предложено ввести это, чтобы включить кнопку продолжения
    verificationHelp: 'Введите "[+:verification]" ниже для подтверждения', // Справка по проверке. [+:verification] будет сопоставлен с 'options.verification' (т. е. 'Введите "continue" ниже для подтверждения')
    clicksCount: 3, // для мягкого подтверждения пользователю будет предложено нажать на кнопку "продолжить" 3 раза, прежде чем действительно продолжить
    backdropClose: false, // установите значение true, чтобы закрыть диалоговое окно при нажатии за пределами диалогового окна, т. е. при щелчке по маске
    customClass: '' // Пользовательский класс, который будет добавлен к родительскому узлу для текущего экземпляра диалога
};

this.$dialog.confirm(message, options)
    .then(function () {
        // Это будет вызвано, когда пользователь нажмёт "продолжить"
    })
    .catch(function () {
        // Это будет вызвано, когда пользователь нажмёт на отмену
    });

// Вы также можете задать все свои значения по умолчанию в момент установки.
// Это будет ваша глобальная конфигурация

// используйте VuejsDialog.main.default, если включаете через тег скрипта
Vue.use(VuejsDialog, {
  html: true,
  loader: true,
  okText: 'Продолжать',
  cancelText: 'Отменить',
  animation: 'bounce'
});

// Обратите внимание, что локальные конфигурации будут учитываться перед глобальными конфигурациями.
// Это даёт вам возможность переопределить глобальную конфигурацию для отдельного вызова.