cxlt-vue2-toastr v1.1.1

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.

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

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

options

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

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