Vue-notice

Installation

import Vue from 'vue'
import VueNotice from 'vue-notice'

Vue.use(VueNotice, options)

Global Options

var options = {
  // notice duration, default is 5000
  duration: 3000,

  // global style, based on built-in style
  style: {
    fontSize: '14px'
  },

  // global themes, will overide corresponding built-in theme
  themes: {
    // will override
    info: {
      color: 'blue'
    },

    // will create new theme
    rainbow: {
      backgroundImage: 'linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)',
      color: 'white'
    }
  }
}

Basic Usage

After install Vue-notice, you can easily use $notice method in any Vue instance

// default
this.$notice('content')

// with style (success, info, warning, error supported)
this.$notice('warning', 'warning')

// with customized style in global options
this.$notice('WOW!', 'rainbow')

Advanced Usage

// instace options
// duration
this.$notice('content', { duration: 1000, style: 'success' })
// customize style
this.$notice('content', { style: { color: 'white', background: 'black' }})