vue-toaster
A fully customizable toaster.
Demo
- register your own toast-components with the toaster
- singleton, same instance shared by all using components
Install
npm install --save-dev vue-toaster// vue@1.0npm install --save-dev vue-toaster@1
or include build/bundle.js
.
Usage
# default is to use it as a mixin # in your component: mixins: require"vue-toaster" # adds a method `toast(options)` # or with bundle.js windowvueCompstoastermethods: : -> # this will just create a `<div class="toast">{{options.text}}</div>` # for each toast: toast = @toasttext:"I'm toast" toastclose # to dismiss # the returned object is identical with the options argument: toastIn = text:"I'm toast" toastOut = @toasttoastIn toastOut === toastIn # true
For examples see dev/
.
Options
The options object will be used in the toaster and then passed down to the toast. These are used by the toaster:
Name | type | default | description |
---|---|---|---|
component | String | "toast" | Name of the component to display |
timeout | Number | 2500 | time in milliseconds, when a toast will be closed automatically. The timeout will be halted on mouseenter and started again on mouseleave |
class | Vue class | ["toast"] | class of the toast element |
style | Vue Style | - | style of the toast element |
cb | Function | - | will be called on close of toast |
These are used in the default toast:
Name | type | default | description |
---|---|---|---|
text | String | - | text to display |
Provide your own toast component
You can provide your own toast component with the help of the global Vue instance:
Vue
You can then use it in your component:
mixins: methods: { @ }
Provide your own toast transition
You can provide a default transition like this:
// must be a transition group// be sure to pass down the context dataVue
Changelog
-
2.0.0
now compatible with vue 2.0.0
changed way of using own transition -
1.1.0
toast now closes on click, can be prevented by a custom toast with@click.prevent="onClick"
added vue transition
renamedclasses
option toclass
properly remove toaster from dom when last using component is destroyed -
1.0.0
added unit tests
Development
Clone repository
npm installnpm run dev
Browse to http://localhost:8080/
.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.