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