vuejs-snackbar

    4.0.1 • Public • Published

    vuejs-snackbar

    NPM Version Download Month gzip with dependencies: 1.3kb pkg.module

    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

    Install

    npm i vuejs-snackbar

    DownloadsWeekly Downloads

    610

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    20.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • livelybone