Unduh vuex flash - Unduh Kode Sumber vuex flash

vuex flash

Kode sumber FLASH

1.0.0

Unduh

VUEX Flash

Komponen pesan flash untuk vue.js dalam vuex

Fitur

beberapa flash
Template Kustom
bertahan data flash di penyimpanan
sangat dapat disesuaikan

Demo & Contoh

Demo langsung dengan cuplikan kode

Memasang

 $ npm install --save vuex-flash

Penggunaan

Komponen Daftar:

 //main.js

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

Vue . use ( VuexFlash ) ;

Register Vuex Store:

 //store.js

import { createFlashStore } from 'vuex-flash' ;

const store = new Vuex . Store ( {
  // ...
  plugins : [
    createFlashStore ( )
  ]
} ) ;

Data flash

Menggunakan `global mixin`

Cukup taruh opsi mixin: true saat mendaftarkan komponen, metode this.flash akan tersedia di setiap komponen

 Vue . use ( VuexFlash , { mixin : true } ) ;

Kemudian di komponen lain:

 this . flash ( { message : 'some message' , variant : 'success' } ) ;
this . $router . push ( '/somepage' ) ; //redirect to /somepage

Anda dapat mengubah nama metode:

 Vue . use ( VuexFlash , { mixin : true , method : 'flashMe' } ) ;
//now
this . flashMe ( { message : 'some message' , variant : 'success' } ) ;

tentang mixin global

Menggunakan `mutation`

Alih -alih mixin global, Anda dapat melakukan mutasi dari komponen untuk mengatur pesan flash:

methods: {
  //...
  someMethod ( ) {
    //..
    this . $store . commit ( 'FLASH/SET_FLASH' , { message : 'some message' , variant : 'success' } ) ;
  }
}

Dengan cara mapMutations :

methods: {
  //...
  someMethod ( ) {
    //..
    this . flash ( { message : 'some message' , variant : 'success' } ) ;
  } ,

  ... mapMutations ( {
    flash : 'FLASH/SET_FLASH'
  } )
}

Perhatikan bahwa tipe mutasi default adalah FLASH/SET_FLASH . Anda dapat mengonfigurasinya dalam opsi.

Tampilkan Flash

 //in somepage component

< template >
  < flash-message variant = "success" > </ flash-message >
  //......
</ template >

Beberapa flash

 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 >

Alat peraga

Nama	Jenis	Bawaan	Desciption
variasi	Rangkaian	-	Prop `required` . Jenis varian flash
penting	Boolean	PALSU	Jika benar, tidak akan ada opsi dekat peringatan flash
autohide	Boolean	PALSU	Otomatis menyembunyikan peringatan flash
TransitionName	Rangkaian	transisi kelas khusus	vue transitions `name` prop lebih
transisi	Rangkaian	'animasi fadeindown'	String Space Separted String untuk Transisi Vue `enter-active-class` Prop More
transisi	Rangkaian	'animasi fadeoutup'	Space terpisah string untuk transisi VUE Prop `leave-active-class`

Gaya peringatan flash

Vuex-Flash menggunakan komponen peringatan Bootstrap V4 sebagai peringatan default. Anda harus menambahkan file CSS bootstrap di tag kepala Anda.

 < 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 " >

Anda selalu dapat menggunakan peringatan Anda sendiri menggunakan Template Kustom.

Variasi

Jenis varian default adalah:

kesuksesan
peringatan
bahaya
info

Anda dapat menambahkan varian khusus.

Transisi

Vuex-Flash menggunakan animate.css sebagai efek transisi default. Anda perlu menambahkan file css di tag kepala Anda

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

Anda dapat mengatur gaya animasi yang berbeda menggunakan transitionIn dan transitionOut Props di beberapa pesan flash:

 < flash-message variant = "success" transitionIn = "animated bounceIn" transitionOut = "animated bounceOut" > </ flash-message >
< flash - message variant = "danger" transitionIn = "animated flipInX" transitionOut = "animated flipOutX" > < / flash-message >

Jika Anda memilih untuk menggunakan templat khusus, maka Anda perlu menambahkan fitur ini sendiri jika Anda mau.

Template Kustom

Template default dapat ditemukan di sini.
Letakkan {{ message }} di dalam templat Anda di mana Anda ingin menampilkan pesan flash.
Gunakan v-if="show" untuk menunjukkan peringatan.
Data string cssClasses akan menjadi semua kelas termasuk variant class dan custom classes yang Anda berikan dalam opsi. Bind Class :class="cssClasses"
Gunakan metode closeFlash untuk memicu tombol tutup klik.
Berikut adalah contoh yang menunjukkan implementasi template khusus pemberitahuan Bulma

Pesan Flash bertahan

Berikut adalah contoh yang menunjukkan cara bertahan Vuex State di sessionstorage menggunakan Vuex-PersistedState.
Jalannya harus sama dengan namespace.
Jenis mutataon dalam filter harus sama dengan kunci mutasi konfigurasi

API

`Vue.use(VuexFlash, [options]);`

Opsi berikut tersedia untuk mengonfigurasi plugin komponen:

name [String] - Nama komponen. (default: 'FlashMessage')
mixin [Boolean] - Jika benar, metode global mixin akan mendaftar untuk mengatur data flash. (default: false)
method [String] - Jika mixin disetel true dan opsi ini diberikan, maka metode mixin global akan mendaftar dengan nama ini. (default: 'flash')
namespace - [String] - Namespace adalah nama yang digunakan untuk membuat modul vuex flash. Ini harus sama dengan namespace createFlashStore . Namespace ini digunakan untuk melakukan mutasi untuk mengatur dan menghapus data flash. Jika disediakan, tipe mutasi akan menjadi '{namespace}/SET_FLASH' . (default: 'FLASH')
duration [Number] - Durasi tampilan pesan flash (dalam milidetik) untuk Auto Hide Flashes. (default: 3000)
template [String] - Template untuk digunakan menunjukkan peringatan. Lihat Template Kustom.
keep [Boolean] - Jika false dan data tetap ada di penyimpanan, penyimpanan akan dihapus setelah menampilkan peringatan setiap saat. Jika disediakan, penyimpanan akan tetap dengan nilai nol. (default: true)
storage [Storage] - Penyimpanan tempat data tetap ada. Jika keep diatur ke False, data akan dihapus dari penyimpanan ini. (default: sessionStorage)
key [String] - Kunci digunakan oleh toko untuk bertahan data. (default: '__vuexFlash')
css [Array] - Array nama kelas CSS khusus. Ini sangat berguna saat membuat templat khusus. (default: [])
variantClass [Function] - Suatu fungsi mengembalikan nama kelas CSS ke komponen peringatan styling berdasarkan varian saat ini. . Dapat mengakses varian saat ini menggunakan this.variant . Jangan gunakan fungsi panah.
(default: function(){ return `alert-${this.variant}`; })
clearPersisted [Function] - Fungsi yang digunakan untuk membersihkan data yang ada dari penyimpanan saat keep diatur ke false. Dapat mengakses penyimpanan menggunakan this.storage . Jangan gunakan fungsi panah.
(default: function(){ this.storage.removeItem(this.key); })

`createFlashStore([options])`

Opsi berikut tersedia untuk mengonfigurasi plugin toko Vuex:

namespace [String] - Namespace ini adalah nama yang digunakan untuk mendaftarkan modul toko Vuex -Flash. (default: 'FLASH')
setter [String] - Ini adalah mutation name dari flash pesan setter.if disediakan, tombol mutasi akan menjadi '${namespace}/${setter}' . (default: 'SET_FLASH')
variants [Array] - Array varian khusus untuk digunakan sebagai negara. Akan digabungkan dengan varian default. (default: [])