Package Exports

vuejs-snackbar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuejs-snackbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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