Dismiss / Close button about vue-toasted

[shakee93]

i believe primary objective of a toast is notify the user. hence adding a close button will change its behavior. so there will be no close button. but you can easily add a close button it is much easier 😉

methods : {
     addCloseButton(toast){
    
        // create a close button
        let close = document.createElement('button');
        close.innerHTML = "x";
        close.className = 'toasted-close';
    
        // add eventListener to close the toast
        close.addEventListener('click', () => {
            toast.goAway(0);
        });
    
        // append the close button to the toast
        toast.el.appendChild(close);
    
    }
}

and just implement it like this

let toast = this.$toasted.show('hell no !!');
this.addCloseButton(toast);

viola !! and style it with the class toasted-close

[trandaison]

@shakee93

Oh you no need to add the close button manually like that.

You can do something like this:

Vue.use(Toasted, {
  action: {
    text: 'X',
    onClick: (e, toastObject) => toastObject.goAway(0),
  },
});