Tout d'abord, les trois points suivants doivent être pris en compte pendant le développement:
1. Entrez et faites des effets d'animation.
2. Contrôle de l'index z
3. Couche de couverture de superposition
À propos de l'animation
Vue est relativement simple pour gérer les animations, il suffit d'ajouter une animation de transition CSS au composant
<matelate> <div transition = "modal-scale"> <! - omettre un autre contenu -> </div> </ template> <script> // ... </script> <style> .modal-scale-transition {transition: transition, opacité .3s facilit;}. modal-sale-enter, .modal-scheave {Opacité: 0;}. Échelle (1.1);}. Modal-Scale-Leave {Transform: Scale (0.8);} </ Style> L'externe peut être contrôlé par l'utilisateur par lui-même, en utilisant v-if ou v-show pour contrôler l'affichage.
Contrôle de l'index z
Concernant le contrôle de z-index , les points suivants doivent être achevés
1. Assurez-vous que z-index du cadre pop-up est suffisamment élevé pour le faire durer la couche la plus externe.
2. z-index de la boîte pop-up qui apparaît plus tard est plus élevé que celui qui apparaît auparavant.
Pour répondre aux deux points ci-dessus, nous avons besoin du code suivant pour implémenter
const zindex = 20141223 // prérégure la valeur supérieure première const getzindex = function () {return zindex ++ // Après chaque acquisition, zindex augmentera automatiquement} Puis liez l' z-index sur le composant
<mpelate> <div: style = "{'z-index': zindex}" transition = "modal-scale"> <! - omettre d'autres contenus -> </ div> </pillate> <cript> export default {data () {return {zindex: getzindex ()}}} </cript>Contrôle de superposition de la couche de couverture
La couche de couverture est la partie la plus difficile de l'assemblage pop-up. Les points suivants doivent être achevés:
1. L'animation entre la couche de masquage et la couche pop-up doit être parallèle
2. z-index de la couche de couverture doit être plus petit que la couche pop-up
3. Lorsque la couche de couverture apparaît, les pages de composants doivent être défilées.
4. Cliquez sur le calque de couverture pour donner des commentaires au calque contextuel
5. Assurez-vous que la page entière ne peut avoir qu'une seule couche de couverture au maximum (plusieurs chevauchement assombriront la couleur de la couche de couverture)
Afin de faire face à ces problèmes, il est également assuré que tous les composants pop-up n'ont pas besoin d'être résolus par chacun, il est donc décidé d'utiliser le mécanisme de mixins de Vue pour encapsuler la logique commune de ces couches pop-up dans un mixin, et chaque composant pop-up est directement référencé.
Vue-popup-mixin
Après avoir clarifié tous les problèmes ci-dessus et commencé à développer un mixin, vous avez d'abord besoin d'une overlay (composant de couche de couverture);
<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 () { return { 'opacity': this.opacity, 'background-color': this.color } } }, methods: { prevent (event) { event.preventDefault() event.stopPropagation() }, handlerClick () { if (this.onClick) { this.onClick() } } }}</script><style lang="less">.overlay {position: fixe; à gauche: 0; à droite: 0; en haut: 0; en bas: 0; Color d'arrière-plan: # 000; Opacité: .4; Z-index: 1000;}. Trolay-Fade-Transition {Transition: Tous .3s Linear; & .Overlay-fade-enter, & .Overlay-fade-leave {Opacity: 0! IMPORTANT; }} </ style> Ensuite, un JS est nécessaire pour gérer l'affichage et la cachette de overlay .
Importer Vue à partir de 'Vue'Import OverlayOpt de' ../overlay '// introduire la superposition Component const Overlay = vue.Extend (overlayOpt) const getDom = function (dom) {if (dom.nodetype === 3) {dom = dom.nextelelementSibling || Dom.NextSibling GetDom (DOM)} return Dom} // Z-Index Control const zindex = 20141223 const getzindex = function () {return zindex ++} // gérer Const popupManager = {instances: [], // Utilisé pour stocker tous les instances de la couche pop-up (! this.instances.indexof (instance)! == -1) return // Lorsqu'il n'y a pas de calque de couverture, le calque de couverture s'affiche si (this.instances.length === 0) {this.showOverlay (instance.overlaycolor, instance.overlayopacity)} this.instances.push (instance) // Stocker la composante de la boîte pop-up ouverte ce.changeoverlayle () // Contrôle de la boîte pop-up-up-up de différentes couches pop-up // ajouter z-index à la couche pop-up const Dom = getDom (instance. $ el) dom.style.zindex = getzindex ()}, // la méthode de fermeture pop-up close (instance) {let index = this.instances.indexof (instance) if (index === -1) return vue.nextTick () => {this.instances.splice. Il n'y a pas de calque contextuel sur la page, fermez le calque de couverture if (this.instances.length === 0) {this.closeOverlay ()} this.changeOverlayStyle ()})}, showoverlay (Color, Opacity) {LET overlay = this.overlay = new overlay ({el: Document.CreateElement ('div')}) const Dom = GetDom. dom.style.zindex = getzindex () overlay.color = couleurs superlay.opacity = opacity overlay.onclick = this.handleroverlayclick.bind (this) overlay. $ appendto (document.body) // prohibit page de décrence {if (! this.overlay) return document.body.style.overflow = this.bodyoverflow let superlay = this.overlay this.overlay = null overlay. $ disove this.instances [this.instances.length - 1] this.overlay.color = instance.overlayColor this.overlay.opacity = instance.overlayopacity}, // La méthode de calcul de la superficie de la couche pop-up sera automatiquement appelée handleroverlayclick () {if (this.instances.length === 0) return constance instance = this.instances [this.instances. (instance.overlayclick) {instance.overlayclick ()}}} window.addeventListener ('keydown', function (event) {if (event.keycode === 27) {// escl if (popupManager.instances.length> 0) {const TopinSistance = PopupMer.Instances [popupuple ;Enfin le résumer dans un mélange
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 the Le composant est monté, il déterminera la valeur du spectacle. Le contrôle est activé. attaché () {if (this.show && this.overlay) {popupManager.open (this)}}, // Fermer lorsque le composant est supprimé détaché () {popupManager.close (this)}, watch: {show (val) {// modifie la valeur de spectacle pour appeler la méthode ouverte et clôturée pour if (Val && th this.overlay) {POPERMER. else {popupmanager.close (this)}}}, beforestroy () {popupmanager.close (this)}}utiliser
Tous les codes ci-dessus complètent la logique partagée de toutes les couches pop-up. Lorsqu'il est utilisé, il vous suffit de les charger comme un mixin.
<template> <div v-show = "show" transition = "Dialog-fade"> <div> <slot> </slot> </div> </div> </ template> <style> .dialog {Left: 50%; en haut: 50%; Transformer: traduire (-50%, -50%); Position: fixe; Largeur: 90%; } .dialog-content {background: #fff; Border-Radius: 8px; rembourrage: 20px; Texte-aligne: Centre; } .dialog-fade-transition {transition: opacité .3s linéaire; } .dialog-fade-enter, .dialog-fade-leave {opacity: 0; } </ style> <cript> Importer une fenêtre contextuelle de '../src'export default {mixins: [popup], méthodes: {// réponse à la superposition de superposition de l'événement () {this.show = false}, // réponse à l'événement de clé ESC ESCPRESS () {this.show = false}}} </ / script>Résumer
Ce qui précède sont quelques points de connaissance sur la composante pop-up Vue.js. J'espère que cela vous aidera à étudier ou à travailler. Si vous avez des questions, vous pouvez laisser un message pour communiquer. Merci pour votre soutien à wulin.com.