vue toast组件
cxlt-vue2-toastr (cxlt-vue2-toastr)
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是Vue2的非阻塞通知，基于toastr的样式和设计以及animate.css动画效果。
建立 (Setup)
Using npm
使用npm
npm install cxlt-vue2-toastr --saveOr using yarn
或使用纱
yarn add cxlt-vue2-toastr用法 (Usage)
导入组件 (Import Component)
import CxltToastr from 'cxlt-vue2-toastr'
Vue.use(CxltToastr)Optional Global configuration options
可选的全局配置选项
var toastrConfigs = {
position: 'top right',
showDuration: 2000
}
Vue.use(CxltToastr, toastrConfigs)You can use All options mentioned in below 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 |
| 选项 | 类型 | 描述 |
|---|---|---|
| successColor | 串 | 成功通知的背景色 |
| infoColor | 串 | 信息通知的背景色 |
| warningColor | 串 | 警告通知的背景颜色 |
| errorColor | 串 | 错误通知的背景色 |
Please note: if you pass color option in your notification instance, it will override above global color options.
请注意：如果您在通知实例中传递了color选项，它将覆盖全局颜色选项之上。
导入样式文件 (Import styling files)
import 'cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css'Or use it in .vue with style tag
或者在带有样式标签的.vue中使用它
<style src="cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css"></style>通话通知实例 (Call Notification Instance)
this.$toast.success({
title:'',
message:''
})cxlt-vue2-toastr support below functions
cxlt-vue2-toastr支持以下功能
| 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 |
| closeButton | Boolean | Need close button or not, default as false |
| progressBar | Boolean | default as false |
| type | String | Type for notification，default as success |
| position | String | Position for notification，default as top right |
| icon | String | Custom Icon |
| showMethod | String | Animation class name for shown，default as fadeIn |
| 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 |
| 选项 | 类型 | 描述 |
|---|---|---|
| 标题 | 串 | 通知标题 |
| 信息 | 串 | 通知内容 |
| closeButton | 布尔型 | 是否需要关闭按钮，默认为false |
| 进度条 | 布尔型 | 默认为假 |
| 类型 | 串 | 通知类型，默认为成功 |
| 位置 | 串 | 通知位置，默认为右上 |
| 图标 | 串 | 自定义图标 |
| showMethod | 串 | 显示的动画类名称，默认为fadeIn |
| hideMethod | 串 | hide的动画类名称，默认为fadeOut |
| showDuration | 数 | 放映动画的持续时间，单位为ms ，默认为1000 |
| hideDuration | 数 | 隐藏动画的持续时间，单位为ms ，默认为1000 |
| 延迟 | 数 | 动画延迟，单位为ms ，默认为0 ，表示无延迟 |
| 超时 | 数 | 通知显示的持续时间，单位为ms ，默认为1500 |
| 颜色 | 串 | 通知的背景色 |
类型 (type)
successsuccessinfoinfowarningwarningerrorerror
位置 (position)
top righttop rightbottom rightbottom rightbottom leftbottom lefttop lefttop lefttop centertop centerbottom centerbottom centertop full widthtop full widthbottom full widthbottom full width
图标 (icon)
Any valid image url.
任何有效的图片网址。
showMethod (showMethod)
bouncebounceflashflashpulsepulserubberBandrubberBandshakeshakeheadShakeheadShakeswingswingtadatadawobblewobblejellojellobounceInbounceInbounceInDownbounceInDownbounceInLeftbounceInLeftbounceInRightbounceInRightbounceInUpbounceInUpfadeInfadeInfadeInDownfadeInDownfadeInDownBigfadeInDownBigfadeInLeftfadeInLeftfadeInLeftBigfadeInLeftBigfadeInRightfadeInRightfadeInRightBigfadeInRightBigfadeInUpfadeInUpfadeInUpBigfadeInUpBigflipInXflipInXflipInYflipInYlightSpeedInlightSpeedInlightSpeedOutlightSpeedOutrotateInrotateInrotateInDownLeftrotateInDownLeftrotateInDownRightrotateInDownRightrotateInUpLeftrotateInUpLeftrotateInUpRightrotateInUpRighthingehingerollInrollInzoomInzoomInzoomInDownzoomInDownzoomInLeftzoomInLeftzoomInRightzoomInRightzoomInUpzoomInUpslideInDownslideInDownslideInLeftslideInLeftslideInRightslideInRightslideInUpslideInUp
hideMethod (hideMethod)
bouncebounceflashflashpulsepulserubberBandrubberBandshakeshakeheadShakeheadShakeswingswingtadatadawobblewobblejellojellobounceOutbounceOutbounceOutDownbounceOutDownbounceOutLeftbounceOutLeftbounceOutRightbounceOutRightbounceOutUpbounceOutUpfadeOutfadeOutfadeOutDownfadeOutDownfadeOutDownBigfadeOutDownBigfadeOutLeftfadeOutLeftfadeOutLeftBigfadeOutLeftBigfadeOutRightfadeOutRightfadeOutRightBigfadeOutRightBigfadeOutUpfadeOutUpfadeOutUpBigfadeOutUpBigflipOutXflipOutXflipOutYflipOutYrotateOutrotateOutrotateOutDownLeftrotateOutDownLeftrotateOutDownRightrotateOutDownRightrotateOutUpLeftrotateOutUpLeftrotateOutUpRightrotateOutUpRightrollOutrollOutzoomOutzoomOutzoomOutDownzoomOutDownzoomOutLeftzoomOutLeftzoomOutRightzoomOutRightzoomOutUpzoomOutUpslideOutDownslideOutDownslideOutLeftslideOutLeftslideOutRightslideOutRightslideOutUpslideOutUp
运行这个项目 (Run this project)
fork the repository，then follow below commands
分叉存储库，然后遵循以下命令
git clone xxx
cd cxlt-vue2-toastr
yarn
npm run dev翻译自: https://vuejsexamples.com/toast-notification-component-for-vue2/
vue toast组件
1977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
