A Vuejs snackbar component, supported SSR, compatible with IE
npm install vuejs-snackbarpkg.module supported, which means that you can apply tree-shaking in you project
wrapClass. the css file content maybe like:
scss
.[wrapClass] {
...
.snack-bar {
...
}
}
`
Demo
https://livelybone.github.io/vue/vuejs-snackbar/
Installation
`bash
npm install vuejs-snackbar --save-dev
`
Register the component
`javascript
import Snackbar from 'vuejs-snackbar';
// Global register
Vue.component('snackbar', Snackbar);
// Local register
new Vue({
components:{Snackbar}
})
`
Apply
`html
// template
`
`javascript
// component
export default{
name:'AnyComponent',
mounted(){
this.$refs.snackbar.info('msg');
this.$refs.snackbar.error('msg');
this.$refs.snackbar.warn('msg');
this.$refs.snackbar.open('msg');
},
components:{Snackbar} // Local register
}
`
Props
| Name | Type | DefaultValue | Description |
| ------------- | ----------------------------------------- | -------------------------------------------------------------------- | ------------ |
| baseSize | String | 100px | Used to set size of snackbar. Tested by reg: /\d(rem|px|em)$/ |
| wrapClass | String | none | Used to set the wrap class of snackbar. When it Used, the prop 'baseSize' will be ignored, and you must rewrite all the style of snackbar |
| colors | Object | {open: '#333',info: '#3DBD7D',error: '#FA7377',warn: '#FF6600'} | Used to set the background color of snackbar with different type |
| holdTime | Number | 3000 | Used to set hold time of snackbar |
| multiple | Boolean | true | Used to set if it show multiple snackbar or not |
| position | String | top-center | Used to set the position of the wrap |
method
| Name | Parameter |
| ------------- | ------------ |
| open | msg --> [String, Object]. when it is an Object, it must be an Object with property toStringFunction], or with property messageString. |
| info | msg |
| warn | msg |
| error` | msg |