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 |