Vuejs-snackbar NPM

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 toString`Function]`, or with property message`String`.
`info`	msg
`warn`	msg
`error`	msg