vuex flash
1.0.0
مكون رسالة فلاش لـ Vue.js داخل Vuex
$ 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بدلاً من Mixin Global ، يمكنك ارتكاب طفرة من المكونات لتعيين رسالة فلاش:
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 prop.the فلاش نوع البديل |
| مهم | منطقية | خطأ شنيع | إذا كان هذا صحيحًا ، فلن يكون هناك خيار قريب من تنبيه الفلاش |
| AutoHide | منطقية | خطأ شنيع | تلقائي إخفاء تنبيه فلاش |
| TransitionName | خيط | انتقال الفئات المخصصة | Vue Transitions name الدعامة المزيد |
| الانتقال | خيط | "الرسوم المتحركة" fadeindown " | السلسلة الفضائية sparted for Vue Transitions enter-active-class Prop أكثر |
| Transitionout | خيط | "تلاشي الرسوم المتحركة" | سلسلة الفضاء sparted for vue تحولات leave-active-class أكثر |
يستخدم Vuex-Flash مكون تنبيه Bootstrap V4 كأحسار افتراضي. أنت بحاجة إلى إضافة ملف CSS Bootstrap في علامة رأسك.
< 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 لتشغيل زر الإغلاق.Vue.use(VuexFlash, [options]);تتوفر الخيارات التالية لتكوين المكون المكون المكون:
name [String] - اسم المكون. (default: 'FlashMessage')
mixin [Boolean] - إذا كان هذا صحيحًا ، فسيقوم Mixin Global بتسجيل لإنشاء بيانات الفلاش. (default: false)
method [String] - إذا تم تعيين mixin بشكل صحيح وتم تقديم هذا الخيار ، فسيتم تسجيل طريقة Mixin Global تحت هذا الاسم. (default: 'flash')
namespace - [String] - مساحة الاسم هي الاسم المستخدم لإنشاء وحدة Vuex Flash createFlashStore تستخدم مساحة الاسم هذه للارتباط بالطفرة لتعيين بيانات الفلاش ومسحها. إذا تم توفيره ، فسيكون نوع الطفرة '{namespace}/SET_FLASH' . (default: 'FLASH')
duration [Number] - مدة عرض رسالة الفلاش (بالمللي ثانية) لإخفاء تلقائي. (default: 3000)
template [String] - القالب لاستخدام إظهار التنبيه. انظر قالب مخصص.
keep [Boolean] - إذا تم استمرار كاذبة وبيانات في التخزين ، فسيتم مسح التخزين بعد عرض التنبيه في كل مرة. إذا تم توفيره ، فسيحتفظ التخزين بقيمة فارغة. (default: true)
storage [Storage] - التخزين حيث يتم استمرار البيانات. إذا تم ضبط keep على خطأ ، فسيتم مسح البيانات من هذا التخزين. (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.Can الوصول إلى التخزين باستخدام this.storage . لا تستخدم وظيفة السهم.
(default: function(){ this.storage.removeItem(this.key); })
createFlashStore([options])تتوفر الخيارات التالية لتكوين البرنامج المساعد Vuex Store:
namespace [String] - مساحة الاسم هي الاسم المستخدم لتسجيل وحدة Vuex -Flash Store. (default: 'FLASH')
setter [String] - هذا هو mutation name Setter.If Setter.If ، سيكون مفتاح الطفرة هو '${namespace}/${setter}' . (default: 'SET_FLASH')
variants [Array] - مجموعة من المتغيرات المخصصة لاستخدامها كدولة. سيتم دمجها مع المتغيرات الافتراضية. (default: [])
معهد ماساتشوستس للتكنولوجيا
