vuex flash

Vuex Flash

vuex 내의 vue.js의 플래시 메시지 구성 요소

특징

• 다중 플래시
• 사용자 정의 템플릿
• 스토리지에서 플래시 데이터를 지속하십시오
• 고도로 사용자 정의 할 수 있습니다

데모 및 예제

코드 스 니펫이있는 라이브 데모

설치하다

 $ npm install --save vuex-flash

용법

등록 구성 요소 :

 //main.js

import Vue from 'vue' ;
import VuexFlash from 'vuex-flash' ;

Vue . use ( VuexFlash ) ;

Vuex Store 등록 :

 //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 사용

Global Mixin 대신 구성 요소의 돌연변이를 저 지르기 위해 플래시 메시지를 설정할 수 있습니다.

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 소품 플래시 변형 유형
중요한	부울	거짓	사실이라면 플래시 경보의 면밀한 옵션이 없습니다.
자동 히드	부울	거짓	자동 숨기기 플래시 경보
TransitionName	끈	커스텀 클래스 전환	Vue 전환 name 소품을 더 이상 전환합니다
전환	끈	'애니메이션 페이드 인딩'	vue 전환을위한 공간 분리 된 문자열은 enter-active-class 소품을 더 많이 사용합니다
전환	끈	'애니메이션 페이드 아웃업'	VUE 전환을위한 공간 분리 된 문자열은 leave-active-class Prop More를 더합니다

플래시 경보 스타일

Vuex-Flash는 부트 스트랩 v4 경고 구성 요소를 기본 알림으로 사용합니다. 헤드 태그에 부트 스트랩 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를 사용합니다. 헤드 태그에 CSS 파일을 추가해야합니다.

 < link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css " >

여러 플래시 메시지에서 transitionIn 및 transitionOut Props를 사용하여 다른 애니메이션 스타일을 설정할 수 있습니다.

 < 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-PeristedState를 사용하여 SessionStorage에서 Vuex 상태를 지속하는 방법을 보여주는 예입니다 .
• 경로는 네임 스페이스와 동일해야합니다.
• 필터의 mutataion 유형은 구성 돌연변이 키와 동일해야합니다.

API

Vue.use(VuexFlash, [options]);

구성 요소 플러그인을 구성하기 위해 다음 옵션을 사용할 수 있습니다.

• name [String] - 구성 요소 이름입니다. (default: 'FlashMessage')

• mixin [Boolean] - True, True, Global Method Mixin은 플래시 데이터 설정에 등록합니다. (default: false)

• method [String] - mixin True가 설정 되고이 옵션이 제공되면 Global Mixin 메소드 가이 이름으로 등록됩니다. (default: 'flash')

• namespace - [문자열] - 네임 스페이스는 Vuex Flash 모듈을 작성하는 데 사용되는 이름입니다. 이는 createFlashStore 네임 스페이스와 동일해야합니다. 이 네임 스페이스는 Flash 데이터를 설정하고 클리어링하기 위해 돌연변이를 저지르는 데 사용되었습니다. 제공된 경우 돌연변이 유형은 '{namespace}/SET_FLASH' 입니다. (default: 'FLASH')

• duration [Number] - 자동 숨기기 플래시의 플래시 메시지 표시 기간 (밀리 초). (default: 3000)

• template [String] - 알림 표시를 사용할 템플릿입니다. 사용자 정의 템플릿을 참조하십시오.

• keep [Boolean] - 허위와 데이터가 저장에 지속되면 매번 경고를 표시 한 후 스토리지가 지워집니다. 제공된 경우 스토리지는 널 값으로 유지됩니다. (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] - 유지를 지우는 데 사용되는 함수는 Storage에서 유지 된 데이터가 this.storage 로 keep 될 때 스토리지에서 유지됩니다. 화살표 기능을 사용하지 마십시오.
  (default: function(){ this.storage.removeItem(this.key); })

createFlashStore([options])

Vuex Store 플러그인을 구성하기 위해 다음 옵션을 사용할 수 있습니다.

• namespace [String] -이 네임 스페이스는 Vuex -Flash 스토어 모듈을 등록하는 데 사용되는 이름입니다. (default: 'FLASH')

• setter [String] - 플래시 메시지 setter의 mutation name 입니다. 제공되면 돌연변이 키는 '${namespace}/${setter}' 입니다. (default: 'SET_FLASH')

• variants [Array] - state로 사용할 사용자 정의 변형 배열은 기본 변형과 병합됩니다. (default: [])

특허

MIT