Alertify js vue

import Vue from 'vue';
import VueAlertify from 'vue-alertify';
 
Vue.use(VueAlertify);
 
var vm = new Vue({
  el: '#main',
  methods: {
    success: function() {
      this.$alertify.success('success');
    },
    alert: function() {
      this.$alertify.alert('This is alert', () =>
        this.$alertify.warning('alert is closed')
      );
    },
    alertWithTitle: function() {
      this.$alertify.alert('alert title', 'This is alert', () =>
        this.$alertify.warning('alert is closed')
      );
    },
    confirm: function() {
      this.$alertify.confirm(
        'This is comfirm',
        () => this.$alertify.success('ok'),
        () => this.$alertify.error('cancel')
      );
    },
    confirmWithTitle: function() {
      this.$alertify.confirm(
        'confirm title',
        'This is comfirm',
        () => this.$alertify.success('ok'),
        () => this.$alertify.error('cancel')
      );
    },
    prompt: function() {
      this.$alertify.prompt(
        'This is prompt',
        'default value',
        (evt, value) => this.$alertify.success('ok: ' + value),
        () => this.$alertify.error('cancel')
      );
    },
    promptWithTitle: function() {
      this.$alertify.promptWithTitle(
        'prompt title',
        'This is prompt',
        'default value',
        (evt, value) => this.$alertify.success('ok: ' + value),
        () => this.$alertify.error('cancel')
      );
    },
    promptWithTypeColor: function() {
      this.$alertify
        .promptWithTitle(
          'prompt title',
          'This is prompt',
          'default value',
          (evt, value) => this.$alertify.success('ok: ' + value),
          () => this.$alertify.error('cancel')
        )
        .set('type', 'color');
    },
  },
  mounted: function() {
    setTimeout(() => {
      this.$alertify.success('Hell Alertify');
    }, 500);
  },
});

Source: npmjs.com

Alertify js vue

Vue.use(VueAlertify, {
  // dialogs defaults
  autoReset: true,
  basic: false,
  closable: true,
  closableByDimmer: true,
  frameless: false,
  maintainFocus: true, // <== global default not per instance, applies to all dialogs
  maximizable: true,
  modal: true,
  movable: true,
  moveBounded: false,
  overflow: true,
  padding: true,
  pinnable: true,
  pinned: true,
  preventBodyShift: false, // <== global default not per instance, applies to all dialogs
  resizable: true,
  startMaximized: false,
  transition: 'pulse',
 
  // notifier defaults
  notifier: {
    // auto-dismiss wait time (in seconds)
    delay: 5,
    // default position
    position: 'top-right',
    // adds a close button to notifier messages
    closeButton: false,
  },
 
  // language resources
  glossary: {
    // dialogs default title
    title: 'AlertifyJS',
    // ok button text
    ok: 'OK',
    // cancel button text
    cancel: 'Cancel',
  },
 
  // theme settings
  theme: {
    // class name attached to prompt dialog input textbox.
    input: 'ajs-input',
    // class name attached to ok button
    ok: 'ajs-ok',
    // class name attached to cancel button
    cancel: 'ajs-cancel',
  },
});

Source: npmjs.com

Similar codes

0 vote247 views1 answer
Rails + vue js projcet demo
Javascript Vue
1 vote295 views4 answers
For loop vue object
Javascript Vue
0 vote301 views2 answers
Vue nested loop
Javascript Vue
1 vote281 views1 answer
Vue test form input
Javascript Vue
1 vote305 views1 answer
Vue select option get attribute
Javascript Vue
4 votes284 views2 answers
Global variable vuejs
Javascript Vue
0 vote308 views1 answer
Vue problem (You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file)
Javascript Vue
1 vote292 views1 answer
Vue watch
Javascript Vue
0 vote281 views1 answer
The data option must be a function. Plain object usage is no longer supported. vue
Javascript Vue
0 vote303 views1 answer
Vue learn
Javascript Vue