toast notification component for vue2
Switch branches/tags
Nothing to show
Clone or download
Latest commit a3dc8aa Nov 9, 2017
Permalink
Failed to load latest commit information.
build 解决打包问题 May 25, 2017
config fix some bugs May 24, 2017
dist custom icon Nov 8, 2017
example publish v1.1.0 Nov 8, 2017
src custom icon Nov 8, 2017
static init Apr 13, 2017
.babelrc init Apr 13, 2017
.editorconfig init Apr 13, 2017
.eslintignore init Apr 13, 2017
.eslintrc.js init Apr 13, 2017
.gitattributes add .gitattributes Jun 14, 2017
.gitignore init Apr 13, 2017
README.en.md publish v1.1.0 Nov 8, 2017
README.md publish v1.1.0 Nov 8, 2017
index.html color Jun 15, 2017
package.json publish v1.1.0 Nov 8, 2017
qrcode_for_chengxulvtu.jpg doc Apr 16, 2017
yarn.lock color Jun 15, 2017

README.md

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

Demo截图

运行程序

先fork项目,然后执行下面的命令

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

更新历史

2017-11-09 添加自定义图标功能

欢迎我的关注公众号