Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue2-toastr

masonchen91.0.3

vue2 toastr component

readme

vue2-toastr

vue2-toastr is a non-blocking notifications for Vue2 ，Based on toastr stylings and design together with animate.css animation effects

Demo: https://chengxulvtu.github.io/toastr/index.html

Setup

Using npm

npm install vue2-toastr --save

Or using yarn

yarn add vue2-toastr

Usage

Import Component

import CxltToastr from 'vue2-toastr'

Vue.use(CxltToastr)

Optional Global configuration options

var toastrConfigs = {
    position: 'top right',
    showDuration: 2000
}
Vue.use(CxltToastr, toastrConfigs)

You can use All options mentioned in below options table except color option, instead, you should use below additional four color options in global configuration.

Option Type Description
successColor String background color for success notificatoin
infoColor String background color for info notificatoin
warningColor String background color for warning notificatoin
errorColor String background color for error notificatoin

Please note: if you pass color option in your notification instance, it will override above global color options.

Import styling files

import 'vue2-toastr/dist/css/vue2-toastr.css'

Or use it in .vue with style tag

<style src="vue2-toastr/dist/css/vue2-toastr.css"></style>

Call Notification Instance

this.$toast.success({
    title:'',
    message:''
})

vue2-toastr support below functions

functions
success
info
warn
error
removeAll

You need to pass an option object which can have below values, used for controlling title, content, position etc.

options

Option Type Description
title String Title for notification
message String Content for notification
closeButton Boolean Need close button or not, default as false
progressBar Boolean default as false
closeOnHover Boolean still close when hover,default as false
type String Type for notification，default as success
position String Position for notification，default as top right
showMethod String Animation class name for shown，default as fadeIn
hideMethod String Animation class name for hide，default as fadeOut
showDuration Number Duration of show animation，unit as ms，default as 1000
hideDuration Number Duration of hide animation，unit as ms，default as 1000
delay Number Delay of animation，unit as ms，default as 0, means no delay
timeOut Number Duration of notification displaying，Unit as ms，default as 1500
color String background color of notification
onClicked Function callback when click
onMouseOver Function callback when mouse over
onMouseOut Function callback when mouse out

type

  • success
  • info
  • warning
  • error

position

  • top right
  • bottom right
  • bottom left
  • top left
  • top center
  • bottom center
  • top full width
  • bottom full width

showMethod

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • flipInX
  • flipInY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • hinge
  • rollIn
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp

hideMethod

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipOutX
  • flipOutY
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • rollOut
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Demo

https://chengxulvtu.github.io/toastr/index.html

Run this project

fork the repository，then follow below commands

git clone xxx
cd vue2-toastr
yarn
npm run dev