vue 单一页面

Vue Flash消息 (vue-flash-message)

The component to display single flash message to user. It has styles presets, but can be easily customized by passing style object as argument.

向用户显示单个Flash消息的组件。 它具有样式预设，但是可以通过将样式对象作为参数来轻松自定义。

建立 (Setup)

npm i @smartweb/vue-flash-message

组态 (Configuration)

import Vue from 'vue';
import FlashMessage from '@smartweb/vue-flash-message';
Vue.use(FlashMessage);

You can pass configuration object as second argument

您可以将配置对象作为第二个参数传递

Vue.use(FlashMessage, config);

配置对象 (Configuration object)

用法 (Usage)

Put the component into your template

将组件放入模板

<FlashMessage></FlashMessage>

Now you can access it by using global EventBus alias (that is "flashMessage" by default) of your Vue instance

现在，您可以通过使用Vue实例的全局EventBus别名(默认为“ flashMessage”)来访问它

this.flashMessage.show({status: 'error', title: 'Error Message Title', message: 'Oh, you broke my heart! Shame on you!'})

方法 (Methods)

You also can use shorthands without status property.

您也可以使用没有状态属性的速记。

this.flashMessage.error({title: 'Error Message Title', message: 'Oh, you broke my heart! Shame on you!'});
this.flashMessage.warning({title: 'Warning Message Title', message: 'Don\'t stop me nooooow....!'});
this.flashMessage.info({title: 'Info Message Title', message: 'Just want you to know, that Vue is so cool'});
this.flashMessage.success({title: 'Success Message Title', message: 'Hoorah, it is my fist npm package and it works!'});

数据对象 (Data Object)

The first argument - is data object.

第一个参数-是数据对象。

Example:

例：

methods: {deleteTrouble() {this.$axios.delete(`/delete/trouble/${trouble.id}`).then( res => {let { status, data, error } = res.data;if(status) {this.flashMessage.success({title: 'Don\'t Warry',message: 'Be Happy!',time: 5000,flashMessageStyle: {backgroundColor: 'linear-gradient(#e66465, #9198e5)'}});}else {this.flashMessage.error({title: error.name || 'Error', message: error.message});}}).catch(e);}}

回呼 (Callbacks)

As second argument you can pass object with two properties: "mounted" and "destroyed".

作为第二个参数，您可以传递具有两个属性的对象：“ mount”和“ destroyed”。

Example:

例：

<p>{{ text }}</p>
<button @click="clickHandler" type="button" name="button">Show Text!</button>

methods: {showText() {this.text = 'Hello from callback!'},clearText() {this.text = 'Bye... 1, ..2, ..3';setTimeout( () => this.text = '', 3000);},clickHandler() {this.flashMessage.info({title: 'Ooooooops!',message: 'Do you see this text? Wtf?'},{mounted: showText,destroyed: clearText})}}

翻译自: https://vuejsexamples.com/single-flash-message-with-vue/

vue 单一页面