@jumamiller/vue2-toastr NPM

cxlt-vue2-toastr (中文文档)

cxlt-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 cxlt-vue2-toastr --save

Or using yarn

yarn add cxlt-vue2-toastr

Usage

Import Component

import CxltToastr from 'cxlt-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 'cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css'

Or use it in .vue with style tag

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

Call Notification Instance

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

cxlt-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
useHtml	Boolean	Allow html-markup in content, default as false
closeButton	Boolean	Need close button or not, default as false
progressBar	Boolean	default as false
type	String	Type for notification，default as success
position	String	Position for notification，default as top right
icon	String	Custom Icon
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

type

success
info
warning
error

position

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

icon

Any valid image url.

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

Demo截图

Run this project

fork the repository，then follow below commands

git clone xxx
cd cxlt-vue2-toastr
yarn
npm run dev

Update History

2017-11-09 Custom Icon.

Welcome to follow my wechat

Please note, you will need wechat app to follow. for oversea users, you may just follow my github.

Donate

BTC: 31wAperpMdHeiy4G8ygoREFDM8hyodabfr

ETH: 0x5d127646887be9adb74efa1e472fa47ce50a50cb

EOS: bobtian31223

vue

@everything-registry/sub-chunk-503 @solutech/sat-v2-datatables @solutech/sat-vue2-datatables

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago