En primer lugar, los siguientes tres puntos deben considerarse durante el desarrollo:
1. Ingrese y emerge efectos de animación.
2. Control del índice Z
3. Capa de cubierta de superposición
Sobre la animación
Vue es relativamente simple de manejar animaciones, solo agregue la animación de transición CSS al componente
<template> <div transition = "modal-escala"> <!-omitir otro contenido-> </div> </template> <script> // ... </script> <style> .modal-scale transition {transition: transform, opacity .3s facilit escala (1.1);}. Modal-Scale-Leave {Transform: Scale (0.8);} </style> El usuario puede controlar el externo, utilizando v-if o v-show para controlar la pantalla.
control del índice Z
Con respecto al control del z-index , los siguientes puntos deben completarse
1. Asegúrese de que z-index del marco emergente sea lo suficientemente alto como para que dure la capa más externa.
2. z-index del cuadro emergente que aparece más tarde es más alto que el que aparece antes.
Para cumplir con los dos puntos anteriores, necesitamos el siguiente código para implementar
const zindex = 20141223 // preestablecido El valor más alto First const getzindex = function () {return zindex ++ // Después de cada adquisición, Zindex aumentará automáticamente} Luego une el z-index en el componente
<Template> <div: style = "{'Z-Index': zindex}" transition = "modal escala"> <!-omitir otro contenido-> </div> </template> <script> exportar predeterminado {data () {return {zindex: getzindex ()}}} </script>Control de superposición de la capa de cubierta
La capa de cobertura es la parte más difícil del ensamblaje emergente. Se requiere que se completen los siguientes puntos:
1. La animación entre la capa de enmascaramiento y la capa emergente debe ser paralela
2. z-index de la capa de cubierta debe ser más pequeño que la capa emergente
3. Cuando aparece la capa de cubierta, las páginas de componentes deben desplazarse.
4. Haga clic en la capa de portada para dar retroalimentación a la capa emergente
5. Asegúrese de que toda la página solo pueda tener una capa de cobertura como máximo (la superposición múltiple oscurecerá el color de la capa de cobertura)
Para abordar estos problemas, también es necesario asegurarse de que todos los componentes emergentes no necesiten ser resueltos por cada uno de ellos. Por lo tanto, se decide utilizar el mecanismo mixins de Vue para encapsular la lógica común de estas capas emergentes en una mezcla, y cada componente emergente se hace referencia directamente.
vue-popup-mixin
Después de aclarar todos los problemas anteriores y comenzar a desarrollar mixin, primero necesita una overlay (componente de capa de cubierta);
<template> <div @click = "handlerClick" @touchmove = "previr": style = "style" transition = "superpuesto-fade"> </div> </template> <script> exportar predeterminado {props: {onClick: {type: function}, opacity: {type: number, predeterminado: 0.4}, color: {type: string, predeterminado: '##~}}, calculado: {): caltado:}, calculado: califique:). {return {'opacity': this.opacity, 'background-color': this.color}}}, métodos: {preven (event) {event.preventDefault () event.stoppropagation ()}, handlerClick () {if (this.onClick) {this.onClick ()}}}}}}} </script> <stily <stelly " Posición: fijo; Izquierda: 0; Derecha: 0; arriba: 0; Abajo: 0; Color de fondo: #000; Opacidad: .4; z-índice: 1000;}. superpuesta-transición {transición: all .3s lineal; y. }} </style> Luego se necesita un JS para administrar la pantalla y la ocultación de overlay .
Importar vue desde 'Vue'Import Overlakyopt de' ../overlay '// Introducir el componente de superposición const overlay = vue.extend (overlayopt) const getDom = function (dom) {if (dom.nodeType === 3) {dom = dom.nextelementsibling || dom.nextsibling getDom (dom)} return dom} // z-index control const zindex = 20141223 const getzindex = function () {return Zindex ++} // Administrar constante PopupManager = {instancias: [], // Se usa para almacenar todas las instancias de la capa emergente: Falso, // llama a este método cuando el buque de ventana emergente está abierto (instancia) (instancia). this.instances.indexof (instancia)! == -1) return // Cuando no hay capa de cobertura, la capa de cobertura se muestra si (this.instances.length === 0) {this.showoverlay (instance.overlayColor, instancia.overlayopacity)} this.instances (instancia) Capas emergentes // Agregue Z-Index a la capa emergente const dom = getDom (instancia. $ el) dom.style.zindex = getzindex ()}, // box de pop-up métod de cierre Cerrar (instancia) {dejar index = this.instances.indexOf (instancia) if (index === -1) return vue.NextTick ((() => {this.instances.splaxe (índice). Capa emergente en la página, cierre la capa de portada if (this.instances.length === 0) {this.closeOverlay ()} this.changeOverlayStyle ()})}, showOverlay (color, opacity) {Let Overlala getZindex () Overlay.color = Color Overlay.Opacity = Opacity Overlay.OnClick = this.handleroverlayClick.bind (this) Overlay. $ appendto (document.body) // Prohibit Page Cerrando esto.BodyOverflow = Document.Body.Style.overflow Document.Body.Style.Overflow = 'Hidden'}, Closeverlay () {) document.body.style.overflow = this.BodyOverflow Let Overlay = this.Overlay this.Overlay = Null Overlay. $ REMEMPRAR (() => {Overlay. $ Destroy ()})}, ChangeOverLyStyle () {if (! this.overlay || this.instances.length === 0) Devuelve const instance = this.instance [this.instances.llong - 1] instance.overlayColor this.overlay.opacity = instance.overlayopacity}, // El método OverlayClick de la capa emergente se llamará automáticamente handLeroverlayClick () {if (this.instances.length === 0) return const instance = this.instances [this.instances.length - 1] if (instance.overlayClick) {instance.overlaverclick () {) {) }} window.adDeventListener ('keydown', function (event) {if (event.keyCode ==== 27) {// esc if (popupManager.instances.length> 0) {const topinstance = popupManager.instances [popupManager.instances.length -1] if (! topinstance.escpress ()}}}}) Exportar PopUpupManager predeterminadoFinalmente encapsularlo en una mezcla
importar popupManager desde './popup-manager'Export predeterminado {props: {show: {type: boolean, default: false}, // si a para mostrar la capa de superposición de superposición: {type: boolean, default: true}, overlalayopacity: {type: número, predeterminado: 0.4}, overcolor: {type: string,###}},/},//////: cuando el componente de componente: {type: string, string,##~},}, /////// Montado, determinará el valor del espectáculo. El control está encendido. adjunte () {if (this.show && this.overlay) {popupManager.open (this)}}, // cerrar cuando el componente se elimina separado () {popupManager.close (this)}, watch: {show (val) {// modifica el valor de la muestra para llamar al método abierto y cerrado para if if if if if.verlay) {PopUpupManager. PopupManager.close (this)}}}, beforedRoy () {popupManager.close (this)}}usar
Todos los códigos anteriores completan la lógica compartida de todas las capas emergentes. Cuando se usa, solo necesita cargarlos como una mezcla.
<template> <div v-show = "show" transition = "diálogo-fade"> <div> <slot> </lot> </div> </div> </template> <syle> .dialog {izquierda: 50%; arriba: 50%; transformar: traducir (-50%, -50%); Posición: fijo; Ancho: 90%; } .dialog-contento {fondo: #fff; Border-Radius: 8px; relleno: 20px; Text-Align: Center; } .Dialog-Fade-Transition {Transition: Opacity .3s Lineal; } .dialog-fade-enter, .dialog-fade-leve {opacidad: 0; } </style> <script> importar emergente desde '../src'Export predeterminado {mixins: [popup], métodos: {// Respuesta a superposición de eventos superpondrayClick () {this.show = false}, // Respuesta al evento de tecla escpress () {this.show = false}}} </script>Resumir
Los anteriores son algunos puntos de conocimiento sobre el componente emergente Vue.js. Espero que te ayude a estudiar o trabajar. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse. Gracias por su apoyo a Wulin.com.