Primeiro de tudo, os três pontos a seguir precisam ser considerados durante o desenvolvimento:
1. Digite e pop -up Efeitos de animação.
2. Controle de Z-Index
3. Camada de cobertura de sobreposição
Sobre animação
Vue é relativamente simples de lidar com animações, basta adicionar animação de transição CSS ao componente
<Modemplate> <div transition = "Modal-Scale"> <!-omitis outros conteúdos-> </div> </modemplate> <cript> // ... </script> <style> .modal-scale-transição {transição: transform, leme-leme .3s; Escala (1.1);}. Livre em escala modal {Transform: Scale (0.8);} </style> O externo pode ser controlado pelo usuário por si só, usando v-if ou v-show para controlar a tela.
Controle do Index Z.
Em relação ao controle do z-index , os seguintes pontos precisam ser concluídos
1. Verifique se z-index da estrutura pop-up é alto o suficiente para fazer com que a camada mais externa.
2. z-index da caixa pop-up que aparece mais tarde é maior que a que aparece antes.
Para atender aos dois pontos acima, precisamos do seguinte código para implementar
const zindex = 20141223 // predefinir o valor mais alto primeiro const getzindex = function () {return zindex ++ // Após cada aquisição, o Zindex aumentará automaticamente} Em seguida, vincule o z-index no componente
<Modemplate> <div: style = "{'z-index': zindex}" transition = "modal-escala"> <!-omitis outros conteúdos-> </div> </modemplate> <cript> exporte default {Data () {return {zindex: getzindex ()}}}} </script>Controle de sobreposição da camada de capa
A camada de capa é a parte mais difícil da montagem pop-up. Os seguintes pontos devem ser concluídos:
1. A animação entre a camada de mascaramento e a camada pop-up precisa ser paralela
2. z-index da camada de capa deve ser menor que a camada pop-up
3. Quando a camada de capa aparece, as páginas de componentes precisam ser roladas.
4. Clique na camada de capa para dar feedback à camada pop-up
5. Verifique se a página inteira pode ter apenas uma camada de capa no máximo (a sobreposição múltipla escurecerá a cor da camada de capa)
Para lidar com esses problemas, também é necessário garantir que todos os componentes pop-up não precisem ser resolvidos por cada um deles. Portanto, é decidido usar o mecanismo de mixins da Vue para encapsular a lógica comum dessas camadas pop-up em uma mistura, e cada componente pop-up é referenciado diretamente.
Vue-Popup-Mixin
Depois de esclarecer todos os problemas acima e começar a desenvolver o Mixin, primeiro você precisa de uma overlay (componente da camada de capa);
<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 = "menos">. Sobreposição {posição: corrigido; Esquerda: 0; Direita: 0; topo: 0; Inferior: 0; Background-Color: #000; opacidade: .4; Z-Index: 1000;}. Transição de sobreposição-fade {transição: todos .3s linear; & .Overlay-Fade-Enter, & .Overlay-Fade-Leave {Opacity: 0! IMPLEMENTE; }} </style> Em seguida, é necessário um JS para gerenciar a tela e o esconderijo da overlay .
importar vue de 'Vue'import Overlayopt de' ../overlay '// Introduzir componente de sobreposição const Overlay = vue.extend (sobreveryopt) const getDom = function (dom) {if (dom.nodeType === 3) {dom = dom.nextElementsibling || Dom.NextSibling getDom (dom)} retornar dom} // z-index Control const zindex = 20141223 const getzindex = function () {return zindex ++} // gerencia const popupManager = {Instâncias: [], // usado para armazenar todas as instâncias da camada pop-up é (FALSH (Falla), // (], o Método), o que é usado para armazenar todas as instâncias da camada pop-up (FALSH),//, //), quando o Métodos de Pop-Up (], //). this.Instances.IndexOf (Instância)! == -1) retorna // Quando não houver camada de cobertura, a camada de tampa é exibida se (this.Instances.Length === 0) {this.showOverlay (instance.overlayColor, instance.overlayOpacity)} this.inStances.push (OverlayLayLeLa, o PopLayOpacity) Transparência e cor de diferentes camadas pop-up // Adicione Z-Index à camada pop-up const Dom = getDom (instância. $ el) dom.style.zindex = getzindex ()}, // caixa pop-up Close Fechar (Instância) {let index = this.inStances.indexof (instance) if (index ===) Return) {let) 1) // Quando não houver camada pop-up na página, feche a camada de capa se (this.instances.Length === 0) {this.closeoverlay ()} this.ChangeOverlayStyle ()})}, exposmante (color, opacity) {Letrayeel = this.OnyAy = New Sobrever getDom (sobreposição. closeverlay () {if (! this.overlay) retorna document.body.style.overflow = this.Bodoverflow Deixe sobrecarregar = this.Overlay this.Overlay = sobreposição nula. $ remover (() => {sobrever. this.instances [this.instances.Length - 1] this.Overlay.Color = Instância.OverlayColor this.overlay.Opacity = Instância.OverlayOpacity}, // O método sobreposição da camada pop -up será automaticamente chamado manipulador de manipulação () {if (this.inStances.Lunda 1] if (instance.overlayClick) {instance.overlayClick ()}}} window.addeventListener ('keydown', function (event) {if (event.keycode === 27) {// ESC se (popupManager.InStances.Length> 0) {constinStance = pop (! topInstance) Retorne if (topInstance.escpress) {topInstance.escpress ()}}}}) exporte o PopUpManager padrãoFinalmente encapsulá -lo em um mixin
Importar PopUpManager de './popup-Manager'export padrão {props: {show: {type: boolean, padrão: false}, // Se você deve exibir a sobreposição de sobreposição:########,###,##,##,##,#,#},#,#,#,#,#},#,#,#,#,#,#},#,#,#,#,#},#,#,#,#,#},#,},#,#,#,#},#,#,#,#,#,#,#,#,#,#,#,#}},#},#}, string}, string}, string}, string}, theveryOpacity: {type: número: número: Quando o componente for montado, ele determinará o valor do show. O controle está ligado. 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)}}usar
Todos os códigos acima completam a lógica compartilhada de todas as camadas pop-up. Quando usado, você só precisa carregá -los como um mixin.
<Modemplate> <div vs-show = "show" transition = "dialog-fade"> <div> <slot> </slot> </div> </div> </modemplate> <style> .dialog {esquerda: 50%; TOP: 50%; Transformar: traduzir (-50%, -50%); Posição: fixado; largura: 90%; } .dialog-content {background: #fff; Radio de fronteira: 8px; preenchimento: 20px; Alinhamento de texto: centro; } .dialog-fade-transição {transição: opacidade .3s linear; } .dialog-fade-entr, .dialog-fade-lave {opacity: 0; } </style> <cript> Importar pop -up de '../src'export padrão {mixins: [pop -up], métodos: {// Resposta ao sobreposição de eventos sobreverclick () {this.show = false}, // Resposta ao evento escpress do evento escpress () {this.show = false}}, </script>Resumir
O exposto acima são alguns pontos de conhecimento sobre o componente pop-up vue.js. Espero que isso ajude você a estudar ou trabalhar. Se você tiver alguma dúvida, pode deixar uma mensagem para se comunicar. Obrigado pelo seu apoio ao wulin.com.