vuex flash
1.0.0
vuex中vue.js的闪存消息组件
$ npm install --save vuex-flash
注册组件：
//main.js
import Vue from 'vue' ;
import VuexFlash from 'vuex-flash' ;
Vue . use ( VuexFlash ) ;注册Vuex商店：
//store.js
import { createFlashStore } from 'vuex-flash' ;
const store = new Vuex . Store ( {
// ...
plugins : [
createFlashStore ( )
]
} ) ;global mixin只需放置一个选项mixin: true在注册组件时， this.flash方法都可以在每个组件中避免
Vue . use ( VuexFlash , { mixin : true } ) ;然后在其他组件中：
this . flash ( { message : 'some message' , variant : 'success' } ) ;
this . $router . push ( '/somepage' ) ; //redirect to /somepage您可以更改方法名称：
Vue . use ( VuexFlash , { mixin : true , method : 'flashMe' } ) ;
//now
this . flashMe ( { message : 'some message' , variant : 'success' } ) ; mutation您可以从组件中提交突变来设置闪存消息：
methods: {
//...
someMethod ( ) {
//..
this . $store . commit ( 'FLASH/SET_FLASH' , { message : 'some message' , variant : 'success' } ) ;
}
}以mapMutations方式：
methods: {
//...
someMethod ( ) {
//..
this . flash ( { message : 'some message' , variant : 'success' } ) ;
} ,
... mapMutations ( {
flash : 'FLASH/SET_FLASH'
} )
}请注意，默认突变类型为FLASH/SET_FLASH 。您可以在选项中配置它。
//in somepage component
< template >
< flash-message variant = "success" > </ flash-message >
//......
</ template > this . flash ( { message : 'some success message' , variant : 'success' } ) ;
this . flash ( { message : 'some warning message' , variant : 'warning' } ) ;
this . flash ( { message : 'some danger message' , variant : 'danger' } ) ;
this . $router . push ( '/somepage' ) ; //redirect to /somepage //in somepage
< flash-message variant = "success" > </ flash-message >
< flash - message variant = "danger" > < / flash-message >
< flash-message variant = "warning" > </ flash-message >| 姓名 | 类型 | 默认 | 降落 |
|---|---|---|---|
| 变体 | 细绳 | - | required道具。闪存变体类型 |
| 重要的 | 布尔 | 错误的 | 如果是真的，则不会有flash警报的接近选择 |
| Autohide | 布尔 | 错误的 | 自动隐藏闪存警报 |
| 过渡名称 | 细绳 | 定制类转换 | Vue Transitions name Prop更多 |
| 过渡素 | 细绳 | “动画fadeindown” | 空间隔离字符串，用于VUE转换enter-active-class支柱更多 |
| 过渡 | 细绳 | “动画淡出” | 空间隔离字符串，用于VUE过渡的leave-active-class支柱 |
Vuex-Flash使用Bootstrap V4警报组件为默认警报。您需要在HEAD标签中添加Bootstrap CSS文件。
< link rel =" stylesheet " href =" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css " integrity =" sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ " crossorigin =" anonymous " >您可以随时使用自定义模板使用自己的警报。
默认变体类型是：
您可以添加自定义变体。
vuex-flash使用Animate.css作为默认过渡效果。您需要在HEAD标签中添加CSS文件
< link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css " >您可以在多个闪存消息中使用transitionIn和transitionOut Prop设置不同的动画样式：
< flash-message variant = "success" transitionIn = "animated bounceIn" transitionOut = "animated bounceOut" > </ flash-message >
< flash - message variant = "danger" transitionIn = "animated flipInX" transitionOut = "animated flipOutX" > < / flash-message >如果您选择使用自定义模板，则需要根据需要自己添加此功能。
{{ message }}放入模板中，要显示闪存消息。v-if="show"显示警报。cssClasses字符串数据将是所有类，包括variant class和您在选项中提供的custom classes 。绑定类:class="cssClasses"closeFlash方法触发关闭按钮单击。Vue.use(VuexFlash, [options]);以下选项可用于配置组件插件：
name [String] - 组件名称。 (default: 'FlashMessage')
mixin [Boolean] - 如果是的，则全局方法Mixin将注册以设置Flash数据。 (default: false)
method [String] - 如果将mixin设置为TRUE，并且给出了此选项，则全局Mixin方法将在此名称下注册。 (default: 'flash')
namespace - [String] - 名称空间是用于创建Vuex Flash模块的名称。该名称与createFlashStore名称空间相同。这个名称空间用于投入突变以设置和清除闪存数据。如果提供，突变类型将为'{namespace}/SET_FLASH' 。 (default: 'FLASH')
duration [Number] - 自动隐藏闪光灯的闪存消息显示持续时间（以毫秒为单位）。 (default: 3000)
template [String] - 要使用警报的模板。请参阅自定义模板。
keep [Boolean] - 如果false和数据在存储中持续存在，则每次显示警报后将清除存储。如果提供，存储将保持为空值。 (default: true)
storage [Storage] - 数据持续存在的存储。如果keep为false，则将从此存储中清除数据。 (default: sessionStorage)
key [String] - 商店使用键来持久数据。 (default: '__vuexFlash')
css [Array] - 自定义CSS类名称的数组。创建自定义模板时，这非常有用。 (default: [])
variantClass [Function] - 一个函数将CSS类名称返回基于当前变体的样式警报组件。 。可以使用this.variant访问当前变体。请勿使用箭头功能。
(default: function(){ return `alert-${this.variant}`; })
clearPersisted [Function] - 将keep设置为false时，用于清除存储中持续数据的函数。可以使用this.storage访问存储。请勿使用箭头功能。
(default: function(){ this.storage.removeItem(this.key); })
createFlashStore([options])以下选项可用于配置VUEX商店插件：
namespace [String] - 此名称空间是用于注册Vuex -Flash Store模块的名称。 (default: 'FLASH')
setter [String] - 这是Flash Message Setter的mutation name 。如果提供，突变密钥将为'${namespace}/${setter}' 。 (default: 'SET_FLASH')
variants [Array] - 用于状态的自定义变体数组。将与默认变体合并。 (default: [])
麻省理工学院
