vuejs-snackbar

pkg.module supported, which means that you can apply tree-shaking in you project

A Vuejs snackbar component, supported SSR, compatible with IE

Repository: https://github.com/livelybone/vuejs-snackbar.git

You can rewrite all style by set prop wrapClass. the css file content maybe like:

  .[wrapClass] {
    ...
    
    .snack-bar {
      ...
    }
  }

Demo

https://livelybone.github.io/vue/vuejs-snackbar/

Installation

npm install vuejs-snackbar --save-dev

Register the component

import Snackbar from 'vuejs-snackbar';
 
// Global register
Vue.component('snackbar', Snackbar);
 
// Local register
new Vue({
  components:{Snackbar}
})
 

Apply

// template
<template>
    <snackbar ref="snackbar" baseSize="100px" :wrapClass="''" :colors="null" :holdTime="3000" :multiple="true"/>
</template>

// 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