Vue Flash Message
  • Getting Started
  • Configuration Object
  • Basic Usage
  • Public Methods
  • Data Object
  • Callbacks Object
  • Raw HTML
  • Custom Component
Powered by GitBook
On this page

Was this helpful?

Callbacks Object

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
            })
        }
    }

PreviousData ObjectNextRaw HTML

Last updated 5 years ago

Was this helpful?