0.7.2 • Published 5 years ago

vue-flash-message v0.7.2

Weekly downloads
3,037
License
MIT
Repository
github
Last release
5 years ago

vue-flash-message

Demo & Example

Live demo

Install

  npm install --save vue-flash-message

Configuration

import Vue from 'vue';
import VueFlashMessage from 'vue-flash-message';
Vue.use(VueFlashMessage);

You can rename default flash method via options:

Vue.use(VueFlashMessage, { method: 'iPreferQuickSilver' });

Usage

Output flash message pool and configure transitions.

<flash-message class="myCustomClass"></flash-message>

(Optional) Include pre defined basic css.

require('vue-flash-message/dist/vue-flash-message.min.css');

Emit flash messages from any component with a flash (or custom named) method.

this.flash('Data loaded', 'success');
this.flash('Validation failed', 'error');
this.flash('Spawning too much alerts is a bad UX', 'warning');
this.flash('Live long and prosper', 'info');

Shortcut methods

You can also use shortcut methods to output common message types

this.flashSuccess('Data loaded');
this.flashError('Validation failed');
this.flashWwarning('Spawning too much alerts is a bad UX');
this.flashIinfo('Live long and prosper');

You if you don't want to spoil your components with these methods, you can switch them off by using createShortcuts config option.

Vue.use(VueFlashMessage, {
  createShortcuts: false,
});

Usage with options

this.flash('Hello World', 'success', {
  timeout: 3000,
  beforeDestroy() {
    alert('oh no, not again!');
  }
});

Options

NameTypeDefaultDesciption
timeoutNumber0Number in milliseconds until message self destruct
importantBooleanfalseDefines if message has a close button.
autoEmitBooleantrueDefines if message should be emitted immediately after calling flash method
pauseOnInteractBooleanfalseDefines if message destruct timer should be paused on user interaction
beforeDestroyFunction-Fires bofore message is destroyed
onStartInteractFunction-Fires on user interact with message element
onCompleteInteractFunction-Fires on user complete interaction with message element

Props

NameTypeDefaultDesciption
transitionNameStringcustom-classes-transitionvue transitions name
outerClassString'flash__wrapper'outer class name

Passing global message options

Vue.use(VueFlashMessage, {
  messageOptions: {
    timeout: 1000,
    important: true,
    autoEmit: false,
    pauseOnInteract: true
  }
});

API

Flash method returns message object giving you full controll over it's contents, options and lifecycle.

const myMessage = this.flash('My message', 'info');
MethodDesciption
emit()Adds message to global storage. Helpfull when message is created with autoEmit: false
destroy()Destroys message
getStorage()Returns global flash message storage object
setSelfDestructTimeout(timeout)Sets message self destruct timer value (in milliseconds)
startSelfDestructTimer()Starts self destruct timer
killSelfDestructTimer()Stops self destruct timer

Calling flash method with no arguments will return flash storage object.

const messageStorage = this.flash();
MethodDesciption
flash(...)Same as this.flash method, except it does not return storage instance
push(id, message)Adds message object to storage with id key
destroy(id)Destroys message by given id
destroyAll()Destroys all messages

Vuex usage

You can access flash message storage object directly from Vue prototype:

Vue.prototype.$flashStorage.flash(...);

License

0.7.2

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.2

6 years ago

0.6.0

6 years ago

0.4.1

6 years ago

0.4.0

6 years ago

0.3.1

6 years ago

0.3.0

6 years ago

0.2.5

6 years ago

0.2.4

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.1.0

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago