vuex flash下載vuex flash源代碼下載

vuex flash

FLASH源碼

1.0.0

下載

vuex閃光燈

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方法觸發關閉按鈕單擊。
這是一個示例，顯示了Bulma通知的自定義模板的實現

持續閃存消息

這是一個示例，該示例顯示瞭如何使用vuex-persistedstate在SessionStorage中持久持續存在VUEX狀態。
路徑必須與命名空間相同。
濾波器中的變種類型必須與配置突變鍵相同

API

`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: [])