vue.js 消息通知插件_一个简单而灵活的通知插件，带有vue.js

vue.js 消息通知插件

Vue Flash消息 (vue-flash-message)

Simple vue flash alert message component. It is made to display a list of messages and give individual control over each message instance.

简单的vue Flash警报消息组件。 它可以显示消息列表并为每个消息实例提供单独的控制。

Component is based on Vuex-flash code and inspired by old goodies as jGrowl. Currently in active development.

该组件基于Vuex闪存代码，并受jGrowl等旧产品的启发。 目前正在积极开发中。

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install --save vue-flash-message

组态 (Configuration)

import Vue from 'vue';
import VueFlashMessage from '../src';
Vue.use(VueFlashMessage);

You can rename default flash method via options:

您可以通过以下选项重命名默认的Flash方法：

Vue.use(VueFlashMessage, {method: 'iPreferQuickSilver'});

用法 (Usage)

Output flash message pool and configure transitions.

输出Flash消息池并配置过渡。

<flash-message transitionIn="animated swing" class="myCustomClass"></flash-message>

(Optional) Include flash messages basic css.

(可选)包括Flash消息基本CSS。

require('vue-flash-message/dist/vue-flash-message.min.css');

Emit flash messages from any component with a flash (or custom named) method.

使用flash(或自定义命名)方法从任何组件发出flash消息。

this.flash('Data loaded', 'success');
this.flash('Validation failed', 'error');
this.flash('Spawning too much alerts is a bad UX', 'warning');
this.flash('It is a flash alert', 'info');

带有选项的用法 (Usage with options)

this.flash('Hello World', 'success', {
  timeout: 3000,
  beforeDestroy() {
    alert('oh no, not again!');
  }
});

选件 (Options)

Name	Type	Desciption
timeout	Number	Number in milliseconds until message self destruct
important	Boolean	Defines if message has a close button. If set to true, message can be closed only after timeout or by destroy method
beforeDestroy	Function	Fires bofore message is destroyed

名称	类型	宗旨
超时	数	直到消息自我销毁为止的毫秒数
重要	布尔型	定义消息是否具有关闭按钮。 如果设置为true，则仅在超时后或使用destroy方法可以关闭消息
销毁之前	功能	发射前消息被破坏

道具 (Props)

Name	Type	Default	Desciption
transitionName	String	custom-classes-transition	vue transitions name
outerClass	String	'flash__wrapper'	outer class name

名称	类型	默认	宗旨
transitionName	串	自定义类转换	Vue转换name
外部类	串	'flash__wrapper'	外层名称

API (API)

Flash method returns message object giving you full controll over it's contents, options and lifecycle.

Flash方法返回消息对象，使您可以完全控制其内容，选项和生命周期。

const myMessage = this.flash('My message', 'info');

Method	Desciption
destroy	Destroys message
getStorage	Returns global flash message storage object

方法	宗旨
破坏	销毁消息
getStorage	返回全局Flash消息存储对象

More API methods coming soon :)

更多API方法即将推出:)

翻译自: https://vuejsexamples.com/a-simple-yet-flexible-notification-plugin-with-vue-js/

vue.js 消息通知插件