toast notification component for vue2
cxlt-vue2-toastr is a non-blocking notifications for Vue2 ，Based on toastr stylings and design together with animate.css animation effects.
cxlt-vue2-toastr (English Doc)
cxlt-vue2-toastr是弹出提示的Vue2组件，基于toastr的样式和animate.css的动画效果。
Demo: https://chengxulvtu.github.io/toastr/index.html
安装
使用npm
npm install cxlt-vue2-toastr --save
或者yarn
yarn add cxlt-vue2-toastr
用法
注册组件
import CxltToastr from 'cxlt-vue2-toastr'
Vue.use(CxltToastr)
还可以传入一个全局配置对象
var toastrConfigs = {
position: 'top right',
showDuration: 2000
}
Vue.use(CxltToastr, toastrConfigs)
下文表格中列举的属性除了color都可在全局配置中使用
另外还可以配置下面四个属性
| 属性 | 类型 | 描述 |
|---|---|---|
| successColor | String | success的背景色 |
| infoColor | String | info的背景色 |
| warningColor | String | warning的背景色 |
| errorColor | String | error的背景色 |
需要注意的是，实例的color属性会覆盖全局配置中的color。
引入样式
import 'cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css'
或在.vue文件中使用style
<style src="cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css"></style>
使用组件
this.$toast.success({
title:'',
message:''
})
cxlt-vue2-toastr支持以下方法
| 方法名 |
|---|
| success |
| info |
| warn |
| error |
| removeAll |
方法需要传递一个对象，用于控制toastr显示的标题、内容、位置等，下面的表格列举了对象的属性
| 属性 | 类型 | 描述 |
|---|---|---|
| title | String | 通知的标题 |
| message | String | 通知的内容 |
| closeButton | Boolean | 是否显示关闭按钮，默认false |
| progressBar | Boolean | 默认false |
| type | String | 通知的类型，默认success |
| position | String | 通知显示的位置，默认top right |
| icon | String | 自定义图标 |
| showMethod | String | 显示动画的名称，默认fadeIn |
| hideMethod | String | 隐藏动画的名称，默认fadeOut |
| showDuration | Number | 显示动画持续的时间，单位ms，默认1000 |
| hideDuration | Number | 隐藏动画持续的时间，单位ms，默认1000 |
| delay | Number | 显示动画开始之前的延迟，单位ms，默认0，没有延迟 |
| timeOut | Number | toast显示的时间，单位ms，默认1500 |
| color | String | toast的背景色 |
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
自定义图标可以是任何有效的图片路径
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
运行程序
先fork项目，然后执行下面的命令
git clone xxx
cd cxlt-vue2-toastr
yarn
npm run dev
更新历史
2017-11-09 添加自定义图标功能
欢迎我的关注公众号
捐助
BTC: 31wAperpMdHeiy4G8ygoREFDM8hyodabfr
ETH: 0x5d127646887be9adb74efa1e472fa47ce50a50cb
EOS: bobtian31223
Github Repository
Tags: #VueJs #Notification