Single flash message with vue
The component to display single flash message to user. It has styles presets, but can be easily customized by passing style object as argument.
vue-flash-message
The component to display single flash message or multiple flash messages to user. It has styles presets, but can be easily customized by passing style object as argument.
Live Demo
Setup
npm i @smartweb/vue-flash-message
Configuration
import Vue from 'vue';
import FlashMessage from '@smartweb/vue-flash-message';
Vue.use(FlashMessage);
You can pass configuration object as second argument
Vue.use(FlashMessage, config);
Configuration object
Property | Type | Description | Default |
---|---|---|---|
name | String | It is a name of the component and alias for the EventBus global property. | 'flashMessage' |
tag | String | Custom tag for the component to use in your application. | 'FlashMesage' |
time | Number | Duration (in ms) of the message display (can be customized during message call). | 8000 |
strategy | String | You can pass 'single' or 'multiple' to choose the default strategy. It can be changed in process. | 'single' |
Usage
Put the component into your template
<FlashMessage></FlashMessage>
You can pass a string as position property to set up default position of messages block. Valid values: 'right bottom', 'right top', 'left bottom', 'left top'.
<FlashMessage :position="right bottom"></FlashMessage>
Now you can access flash message by using global EventBus alias (that is "flashMessage" by default) of your Vue instance
this.flashMessage.show({status: 'error', title: 'Error Message Title', message: 'Oh, you broke my heart! Shame on you!'})
Methods
Display Methods
Every display message method will return the id of the message instance
this.flashMessage.show({status: 'error', title: 'Error Message Title', message: 'Oh, you broke my heart! Shame on you!'})
You also can use shorthands without status property.
this.flashMessage.error({title: 'Error Message Title', message: 'Oh, you broke my heart! Shame on you!'});
this.flashMessage.warning({title: 'Warning Message Title', message: 'Don\'t stop me nooooow....!'});
this.flashMessage.info({title: 'Info Message Title', message: 'Just want you to know, that Vue is so cool'});
this.flashMessage.success({title: 'Success Message Title', message: 'Hoorah, it is my fist npm package and it works!'});
You can pass the data object to configure a message instance.
Data Object
The first argument - is data object.
Property | Type | Description |
---|---|---|
status | String | Status of component. Default presets: 'error', 'warning', 'info', 'success' |
title | String | Title of your message |
message | String | Text of your message |
time | Number | Duration (in ms) of the single message display |
icon | String | A URL for icon or image to display |
clickable | Boolean | Allows to control whether the user can remove message by click on it or not. |
blockClass | String | custom class name for flashMessage block. |
iconClass | String | custom class name for icon block. |
contentClass | String | custom class name for content block |
position | String | in case, when you want to set up custom "fixed" position relative to viewport, you can pass string 'left/right-top/bottom'. Available positions: 'top left', 'top right', 'bottom left', 'bottom right'. |
x | Number | Amount of pixels to position your message relating to the 'X' axis |
y | Number | Amount of pixels to position your message relating to the 'Y' axis |
Example:
methods: {
deleteTrouble() {
this.$axios.delete(`/delete/trouble/${trouble.id}`)
.then( res => {
let { status, data, error } = res.data;
if(status) {
this.flashMessage.success({
title: 'Don\'t Warry',
message: 'Be Happy!',
time: 5000,
blockClass: 'custom-block-class'
});
}
else {
this.flashMessage.error({title: error.name || 'Error', message: error.message});
}
})
.catch(e);
}
}
Callbacks
As second argument you can pass object with two properties: "mounted" and "destroyed".
Property | Type | Description |
---|---|---|
mounted | Function | Will be invoked, when flashMessage appears |
destroyed | Function | Will be invoked, when flashMessage gone |
Example:
<p>{{ text }}</p>
<button @click="clickHandler" type="button" name="button">Show Text!</button>
For example you can add some sound which will be played when message appears
methods: {
showText() {
this.text = 'Hello from callback!'
},
clearText() {
this.text = 'Bye... 1, ..2, ..3';
let sound = new Audio('audio source'); // add sound source
sound.play(); // and play it
setTimeout( () => this.text = '', 3000);
},
clickHandler() {
this.flashMessage.info({
title: 'Ooooooops!',
message: 'Do you see this text and hear this sound? Wtf?'
},
{
mounted: showText,
destroyed: clearText
})
}
}
Delete Methods
You can delete message programmatically using deleteMessage method
Example:
let id = this.flashMessage.info({title: 'Hey, man. Time for beer!', message: 'It is Friday. Time to have a little party.'})
this.flashMessage.deleteMessage(id);
Set Strategy
You can update default strategy using setStrategy method.
/* Will return {Boolean} as result */
this.flashMessage.setStrategy('multiple'); // strategy changed to multiple
LICENSE
The MIT License (MIT). Please see License File for more information.
Github Repository
Tags: #VueJs #Notification #Message