alertify js vue

1import Vue from 'vue';
2import VueAlertify from 'vue-alertify';
3 
4Vue.use(VueAlertify);
5 
6var vm = new Vue({
7  el: '#main',
8  methods: {
9    success: function() {
10      this.$alertify.success('success');
11    },
12    alert: function() {
13      this.$alertify.alert('This is alert', () =>
14        this.$alertify.warning('alert is closed')
15      );
16    },
17    alertWithTitle: function() {
18      this.$alertify.alert('alert title', 'This is alert', () =>
19        this.$alertify.warning('alert is closed')
20      );
21    },
22    confirm: function() {
23      this.$alertify.confirm(
24        'This is comfirm',
25        () => this.$alertify.success('ok'),
26        () => this.$alertify.error('cancel')
27      );
28    },
29    confirmWithTitle: function() {
30      this.$alertify.confirm(
31        'confirm title',
32        'This is comfirm',
33        () => this.$alertify.success('ok'),
34        () => this.$alertify.error('cancel')
35      );
36    },
37    prompt: function() {
38      this.$alertify.prompt(
39        'This is prompt',
40        'default value',
41        (evt, value) => this.$alertify.success('ok: ' + value),
42        () => this.$alertify.error('cancel')
43      );
44    },
45    promptWithTitle: function() {
46      this.$alertify.promptWithTitle(
47        'prompt title',
48        'This is prompt',
49        'default value',
50        (evt, value) => this.$alertify.success('ok: ' + value),
51        () => this.$alertify.error('cancel')
52      );
53    },
54    promptWithTypeColor: function() {
55      this.$alertify
56        .promptWithTitle(
57          'prompt title',
58          'This is prompt',
59          'default value',
60          (evt, value) => this.$alertify.success('ok: ' + value),
61          () => this.$alertify.error('cancel')
62        )
63        .set('type', 'color');
64    },
65  },
66  mounted: function() {
67    setTimeout(() => {
68      this.$alertify.success('Hell Alertify');
69    }, 500);
70  },
71});

1Vue.use(VueAlertify, {
2  // dialogs defaults
3  autoReset: true,
4  basic: false,
5  closable: true,
6  closableByDimmer: true,
7  frameless: false,
8  maintainFocus: true, // <== global default not per instance, applies to all dialogs
9  maximizable: true,
10  modal: true,
11  movable: true,
12  moveBounded: false,
13  overflow: true,
14  padding: true,
15  pinnable: true,
16  pinned: true,
17  preventBodyShift: false, // <== global default not per instance, applies to all dialogs
18  resizable: true,
19  startMaximized: false,
20  transition: 'pulse',
21 
22  // notifier defaults
23  notifier: {
24    // auto-dismiss wait time (in seconds)
25    delay: 5,
26    // default position
27    position: 'top-right',
28    // adds a close button to notifier messages
29    closeButton: false,
30  },
31 
32  // language resources
33  glossary: {
34    // dialogs default title
35    title: 'AlertifyJS',
36    // ok button text
37    ok: 'OK',
38    // cancel button text
39    cancel: 'Cancel',
40  },
41 
42  // theme settings
43  theme: {
44    // class name attached to prompt dialog input textbox.
45    input: 'ajs-input',
46    // class name attached to ok button
47    ok: 'ajs-ok',
48    // class name attached to cancel button
49    cancel: 'ajs-cancel',
50  },
51});
52