lxc-xx/cxlt-vue2-toastr

toastr component for vue2

JavaScript

cxlt-vue2-toastr

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)

引入样式

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
type	String	通知的类型，默认success
position	String	通知显示的位置，默认top right
showMethod	String	显示动画的名称，默认fadeIn
hideMethod	String	隐藏动画的名称，默认fadeOut
showDuration	Number	显示动画持续的时间，单位ms，默认1000
hideDuration	Number	隐藏动画持续的时间，单位ms，默认1000
delay	Number	显示动画开始之前的延迟，单位ms，默认0，没有延迟
timeOut	Number	toastr显示的时间，单位ms，默认1500

type

success
info
warning
error

position

top right
bottom right
bottom left
top left
top center
bottom center
top full width
bottom full width

showMethod

hideMethod

Demo

https://chengxulvtu.github.io/toastr/index.html

运行程序

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

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

欢迎我的关注公众号