Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chengxulvtu/cxlt-vue2-toastr
toast notification component for vue2
https://github.com/chengxulvtu/cxlt-vue2-toastr
Last synced: 3 months ago
JSON representation
toast notification component for vue2
- Host: GitHub
- URL: https://github.com/chengxulvtu/cxlt-vue2-toastr
- Owner: chengxulvtu
- License: mit
- Created: 2017-04-12T09:46:25.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:57:06.000Z (over 1 year ago)
- Last Synced: 2023-11-07T20:23:06.921Z (8 months ago)
- Language: Vue
- Homepage:
- Size: 3.8 MB
- Stars: 164
- Watchers: 13
- Forks: 57
- Open Issues: 28
-
Metadata Files:
- Readme: README.en.md
- License: LICENSE
Lists
- awesome-vue - cxlt-vue2-toastr - vue2-toastr?style=social) - 弹出提示的Vue2组件 (UI组件)
- awesome-github-vue - cxlt-vue2-toastr - 弹出提示的Vue2组件 (UI组件)
- awesome-github-vue - cxlt-vue2-toastr - 弹出提示的Vue2组件 (UI组件)
- awesome - cxlt-vue2-toastr - 弹出提示的Vue2组件 (UI组件)
- awesome-github-vue - cxlt-vue2-toastr - 弹出提示的Vue2组件 (UI组件)
README
# cxlt-vue2-toastr ([中文文档](/README.md))
**cxlt-vue2-toastr** is a non-blocking notifications for Vue2 ，Based on [toastr](https://github.com/CodeSeven/toastr) stylings and design together with [animate.css](https://github.com/daneden/animate.css) animation effects
**Demo:** [https://chengxulvtu.github.io/toastr/index.html](https://chengxulvtu.github.io/toastr/index.html)
## Setup
Using npm
```bash
npm install cxlt-vue2-toastr --save
```
Or using yarn
```bash
yarn add cxlt-vue2-toastr
```
## Usage
### Import Component
```javascript
import CxltToastr from 'cxlt-vue2-toastr'
Vue.use(CxltToastr)
```
Optional Global configuration options
```javascript
var toastrConfigs = {
position: 'top right',
showDuration: 2000
}
Vue.use(CxltToastr, toastrConfigs)
```
You can use All options mentioned in below [options](#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
```javascript
import 'cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css'
```
Or use it in .vue with style tag
```
```
### Call Notification Instance
```javascript
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](#type) | String | Type for notification，default as success |
| [position](#position) | String | Position for notification，default as top right |
| icon | String | Custom Icon |
| [showMethod](#showmethod) | String | Animation class name for shown，default as fadeIn |
| [hideMethod](#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](https://chengxulvtu.github.io/toastr/index.html)
## Run this project
fork the repository，then follow below commands
```bash
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