Zunächst müssen die folgenden drei Punkte während der Entwicklung berücksichtigt werden:
1. Eingeben und Pop -up -Animationseffekte.
2. Kontrolle von Z-Index
3.. Overlay -Abdeckschicht
Über Animation
Vue ist relativ einfach zu handhaben, um Animationen zu behandeln. Fügen Sie der Komponente einfach CSS -Übergangsanimation hinzu
<Template> <div transition = "modal-scale"> <!-andere Inhalte weglassen-> </div> </template> <cript> // ... </script> <style> .modal-scale-transition {transition: transformation, apital. Skala (1.1);}. Modal-Scale-Leave {Transformation: Skala (0,8);} </style> Das externe kann vom Benutzer selbst unter Verwendung von v-if oder v-show zur Steuerung der Anzeige gesteuert werden.
Z-Index-Kontrolle
In Bezug auf die Kontrolle von z-index müssen die folgenden Punkte abgeschlossen werden
1. Stellen Sie sicher, dass z-index des Popup-Rahmens hoch genug ist, um die äußerste Schicht zu halten.
2. z-index des später auftauchenden Popup-Boxs ist höher als der, der zuvor auftaucht.
Um die beiden oben genannten Punkte zu erreichen, benötigen wir den folgenden Code zum Implementieren
const zindex = 20141223 // Voreinstimmen Der höhere Wert First const GetzIndex = function () {return Zindex ++ // Nach jeder Erfassung erhöht Zindex automatisch} Binden Sie dann den z-index an der Komponente
<semplate> <div: style = "{'z-Index': Zindex}" transition = "modal-scale"> <!-andere Inhalte weglassen-> </div> </template> <script> exportieren Standard {data () {return {zindex: getzIndex ()}}} </script>Overlay -Steuerung der Abdeckschicht
Die Deckschicht ist der schwierigste Teil der Pop-up-Montage. Die folgenden Punkte müssen abgeschlossen sein:
1. Die Animation zwischen der Maskierungsschicht und der Popup-Schicht muss parallel sein
2. z-index der Abdeckschicht sollte kleiner sein als die Popup-Schicht
3. Wenn die Abdeckungsschicht auftaucht, müssen Komponentenseiten gescrollt werden.
4. Klicken Sie auf die Abdeckschicht, um die Popup-Ebene Feedback zu geben
5. Stellen Sie sicher, dass die gesamte Seite höchstens eine Abdeckschicht haben kann (mehrere Überlappungen verdunkeln die Farbe der Abdeckschicht)
Um mit diesen Problemen umzugehen, wird auch sichergestellt, dass alle Pop-up-Komponenten nicht von jedem gelöst werden müssen. Daher wird beschlossen, den mixins -Mechanismus von Vues zu verwenden, um die gemeinsame Logik dieser Pop-up-Schichten in einen Mixin zu verringern, und jede Popup-Komponente wird direkt referenziert.
Vue-Popup-Mixin
Nachdem Sie alle oben genannten Probleme geklärt und Mixin entwickelt haben, benötigen Sie zunächst eine overlay (Deckschichtkomponente).
<template> <div @click="handlerClick" @touchmove="prevent" :style="style" transition="overlay-fade"></div></template><script>export default { props: { onClick: { type: Function }, opacity: { type: Number, default: 0.4 }, color: { type: String, default: '#000' } }, computed: { style . {Position: behoben; links: 0; Rechts: 0; Top: 0; unten: 0; Hintergrundfarbe: #000; Deckkraft: .4; Z-Index: 1000;}. Overlay-Fade-Übergang {Übergang: alle .3s linear; & .overlay-fade-Enter, & .overlay-fade-lave {Deckkraft: 0! Wichtig; }} </style> Dann wird ein JS benötigt, um das Display und das Verstecken von overlay zu verwalten.
Importieren Sie VUE aus 'Vue'import Overlayopt aus' ../overlay '// Overlay Component const expect = vue.extend (Overlayopt) const getdom = function (dom) {if (dom.nodetype ==== 3) {Dom = Dom.NextElementSibling || Dom.NextSsibling getdom (Dom)} return DOM} // Z-Index Control const zindex = 20141223 const GetzIndex = function () {return zindex ++} // Verwalten Sie const popupManager = {Instances: [], // verwendet, um alle Popup-Schicht-Instanzen zu speichern. this.instances.indexof (Instanz)! Die Transparenz und Farbe verschiedener Pop-up-Schichten // Z-Index zur Pop-up-Schicht const Dom = getdom (Instanz. $ el) dom.style.zindex = getZindex ()}, // Popup-Box-Verschluss (Instanz) {let Index = this.instances.intenxof (Instance) = Instance (Index ==== -1) -1) Fügen Sie. this.inStances.SPLICE (INDEX, 1) // Wenn auf der Seite keine Popup-Schicht vorhanden ist, schließen Sie die Deckschicht if (this.instances }) const dom = getdom (Overlay. $ el) dom.style.zindex = getzindex () operay.color = color overay.opacity = opacity overay.onclick = thatlerOverlayclick.bind (this) Overlay. document.body.style.overflow = 'Hidden'}, CloseOverlay () {if (! this.overlay) return document.body.style.overflow = this.bodyOverflow let overlay = this.overlay this.overlay = null Overlay. ||. 0) return const Instance = this.instances [this.instances.length - 1] if (Instance.OverlayClick) {Instance.OverlayClick ()}}} Fenster.AdDeVentListener ('keydown', function (event) {if (Event.keyCode ==== 27) {// ESCdoMt. PopupManager.inStances [popupManager.instances.length - 1] if (! Topinstance) return if (topinstance.esescpress) {topinstance.esescpress ()}}}}) Exportieren Sie die Standardpopuktion PopupManagerSchließlich in einen Mixin einkapseln
import PopupManager from './popup-manager'export default { props: { show: { type: Boolean, default: false }, // Whether to display the overlay layer overlay: { type: Boolean, default: true }, overlayOpacity: { type: Number, default: 0.4 }, overlayColor: { type: String, default: '#000' } }, // When Die Komponente ist montiert und bestimmt den Wert der Show. Die Kontrolle ist eingeschaltet. attached () { if (this.show && this.overlay) { PopupManager.open(this) } }, // Close when the component is removed detached () { PopupManager.close(this) }, watch: { show (val) { // Modify the show value to call the open and close method for if (val && this.overlay) { PopupManager.open(this) } else {PopupManager.CLOSE (this)}}}, BeForedestroy () {popupManager.close (this)}}verwenden
Alle oben genannten Codes vervollständigen die gemeinsame Logik aller Pop-up-Ebenen. Bei Verwendung müssen Sie sie nur als Mixin laden.
<Template> <div v-show = "show" transition = "dialog-fade"> <div> <Slot> </slot> </div> </div> </template> <style> .dialog {links: 50%; Top: 50%; Transformation: Translate (-50%, -50%); Position: fest; Breite: 90%; } .dialog-content {Hintergrund: #fff; Border-Radius: 8px; Polsterung: 20px; Text-Align: Mitte; } .Dialog-fade-transition {Übergang: Opazität .3s linear; } .Dialog-fade-Enter, .Dialog-fade-Leave {Deckkraft: 0; } </style> <script> Popup aus '../src'export Standard {Mixins: [Popup], Methoden: {// Antwort auf Overlay Ereignis OverlayClick () {this.show = false}, // Antwort auf ESC -Ereignis eScPress () {this.show = false}}}} </script>Zusammenfassen
Die oben genannten sind einige Wissenspunkte über die Popup-Komponente von Vue.js. Ich hoffe, es wird Ihnen helfen, zu studieren oder zu arbeiten. Wenn Sie Fragen haben, können Sie eine Nachricht zur Kommunikation überlassen. Vielen Dank für Ihre Unterstützung bei Wulin.com.