vuex flash

Vuex Flash

ส่วนประกอบข้อความแฟลชสำหรับ vue.js ภายใน vuex

คุณสมบัติ

• แฟลชหลายตัว
• เทมเพลตที่กำหนดเอง
• คงข้อมูลแฟลชในการจัดเก็บข้อมูล
• ปรับแต่งได้สูง

การสาธิตและตัวอย่าง

การสาธิตสดพร้อมโค้ดตัวอย่าง

ติดตั้ง

 $ 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' } ) ; 

เกี่ยวกับ Global Mixin

ใช้ mutation

แทนที่จะเป็น Global Mixin คุณสามารถทำการกลายพันธุ์จากส่วนประกอบเพื่อตั้งค่าข้อความแฟลช:

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

ใน mapMutations Way:

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 ประเภทตัวแปรแฟลช
สำคัญ	บูลีน	เท็จ	ถ้าเป็นจริงจะไม่มีตัวเลือกปิดการแจ้งเตือนแฟลช
อัตโนมัติ	บูลีน	เท็จ	Auto ซ่อนการแจ้งเตือนแฟลช
ชื่อช่วงเปลี่ยนผ่าน	สาย	การเปลี่ยนชั้นเรียนแบบกำหนดเอง	Vue Transitions name Prop เพิ่มเติม
ในช่วงเปลี่ยนผ่าน	สาย	'ภาพเคลื่อนไหว fadeindown'	String space separted สำหรับการเปลี่ยน vue enter-active-class prop เพิ่มเติม
การเปลี่ยนผ่าน	สาย	'ภาพเคลื่อนไหว fadeoutup'	String space separted สำหรับการเปลี่ยน vue leave-active-class prop เพิ่มเติม

สไตล์การแจ้งเตือนแฟลช

Vuex-Flash ใช้ส่วนประกอบการแจ้งเตือน Bootstrap V4 เป็นการแจ้งเตือนเริ่มต้นคุณต้องเพิ่มไฟล์ 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 เป็นเอฟเฟกต์การเปลี่ยนเริ่มต้นคุณต้องเพิ่มไฟล์ 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 ของคุณที่คุณมีในตัวเลือก bind class :class="cssClasses"
• ใช้วิธี closeFlash เพื่อเรียกใช้ปุ่มปิดคลิก
• นี่คือตัวอย่าง ที่แสดงการใช้งานเทมเพลตที่กำหนดเองของการแจ้งเตือน Bulma

ข้อความคงที่

• นี่คือตัวอย่าง ที่แสดงวิธีการคงสถานะ Vuex ใน SessionStorage โดยใช้ Vuex-PersistedState
• เส้นทางจะต้องเหมือนกับเนมสเปซ
• ประเภท mutataion ในตัวกรองจะต้องเหมือนกับรหัสการกลายพันธุ์ของการกำหนดค่า

API

Vue.use(VuexFlash, [options]);

ตัวเลือกต่อไปนี้พร้อมใช้งานเพื่อกำหนดค่าปลั๊กอินส่วนประกอบ:

• name [String] - ชื่อส่วนประกอบ (default: 'FlashMessage')

• mixin [Boolean] - ถ้าเป็นจริงวิธีการทั่วโลก Mixin จะลงทะเบียนสำหรับการตั้งค่าข้อมูลแฟลช (default: false)

• method [String] - หากมีการตั้ง mixin อินจริงและตัวเลือกนี้จะได้รับวิธีการผสมทั่วโลกจะลงทะเบียนภายใต้ชื่อนี้ (default: 'flash')

• namespace - [String] - เนมสเปซเป็นชื่อที่ใช้สำหรับการสร้างโมดูล Vuex Flash นี่ควรจะเหมือนกับเนมสเปซ createFlashStore เนมสเปซนี้ใช้สำหรับการเรียกการกลายพันธุ์เพื่อตั้งค่าและล้างข้อมูลแฟลช หากมีให้ประเภทการกลายพันธุ์จะเป็น '{namespace}/SET_FLASH' (default: 'FLASH')

• duration [Number] - ระยะเวลาการแสดงข้อความแฟลช (เป็นมิลลิวินาที) สำหรับการซ่อนแฟลชอัตโนมัติ (default: 3000)

• template [String] - เทมเพลตที่จะใช้การแสดงการแจ้งเตือน ดูเทมเพลตที่กำหนดเอง

• keep [Boolean] - หากเป็นเท็จและข้อมูลยังคงอยู่ในที่เก็บข้อมูลพื้นที่เก็บข้อมูลจะถูกล้างหลังจากแสดงการแจ้งเตือนทุกครั้ง หากมีให้ที่เก็บข้อมูลจะรักษาค่า NULL (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 ของ Flash Message Setter.if ที่ให้ไว้รหัสการกลายพันธุ์จะเป็น '${namespace}/${setter}' (default: 'SET_FLASH')

• variants [Array] - อาร์เรย์ของตัวแปรที่กำหนดเองที่จะใช้เป็นสถานะจะถูกรวมเข้ากับตัวแปรเริ่มต้น (default: [])

ใบอนุญาต

มิกซ์