우선, 개발 중에 다음 세 포인트를 고려해야합니다.
1. 애니메이션 효과를 입력하고 팝업하십시오.
2. Z- 인덱스의 제어
3. 오버레이 커버 레이어
애니메이션에 대해
Vue는 애니메이션을 처리하는 것이 비교적 간단합니다. 구성 요소에 CSS 전환 애니메이션을 추가하십시오.
<template> <div thrownition = "modal-scale"> <!-다른 컨텐츠 생략-> </div> </템플릿> <cript> // ... </script> <style>. 모달-스케일 전송 {전환, 불투명도 .3S 편의; Scale (1.1);}. Modal-Scale-Leave {transform : scale (0.8);} </style> 외부는 v-if 또는 v-show 사용하여 디스플레이를 제어하여 사용자 자체에 의해 제어 될 수 있습니다.
Z- 인덱스 제어
z-index 의 제어와 관련하여 다음 지점을 완료해야합니다.
1. 팝업 프레임의 z-index 가장 바깥 쪽 층을 지속 할 수있을 정도로 높는지 확인하십시오.
2. 나중에 나타나는 팝업 박스의 z-index 이전에 팝업 된 것보다 높습니다.
위의 두 지점을 충족하려면 구현하려면 다음 코드가 필요합니다.
const zindex = 20141223 // 더 높은 값을 사전 설정 먼저 const getzindex = function () {return zindex ++ // 각 획득 후 Zindex가 자동으로 증가합니다} 그런 다음 구성 요소에 z-index 바인딩합니다
<template> <div : style = "{ 'z-index': zindex}"transceition = "modal-scale"> <!-다른 컨텐츠를 생략-> </div> </템플릿> <cript> 내보내기 기본값 {return {Zindex : getzindex ()}}}} </script>커버 레이어의 오버레이 제어
커버 레이어는 팝업 어셈블리에서 가장 어려운 부분입니다. 다음 사항은 완료해야합니다.
1. 마스킹 레이어와 팝업 레이어 사이의 애니메이션은 평행해야합니다.
2. 커버 레이어의 z-index 팝업 레이어보다 작아야합니다.
3. 커버 레이어가 팝업되면 구성 요소 페이지를 스크롤해야합니다.
4. 커버 레이어를 클릭하여 팝업 레이어에 피드백을 제공합니다.
5. 전체 페이지에 최대 하나의 커버 레이어 만 가질 수 있는지 확인하십시오 (다중 겹쳐지는 커버 레이어의 색상이 어두워집니다).
이러한 문제를 처리하려면 각 팝업 구성 요소를 각각에 의해 해결할 필요가 없도록해야합니다. 따라서 Vue의 mixins 메커니즘을 사용하여 이러한 팝업 층의 공통 논리를 Mixin으로 캡슐화하기로 결정했으며 각 팝업 구성 요소는 직접 참조됩니다.
vue-popup-mixin
위의 모든 문제를 명확히하고 믹스 인을 개발하기 시작한 후 먼저 overlay (커버 레이어 구성 요소)가 필요합니다.
<emplate> <div @click = "handlerclick" @touchmove = "예방": style = "style"wrantition = "오버레이-페이드"> </div> </div> </div> </div> </div> </div> </div> {click : {type : {type : inclation} : {type : number, default : 0.4}, {type : rint, default :#000 ' {style () {return {retacity ': this.Hepacity,'back lang = "Less">. 오버레이 {위치 : 고정; 왼쪽 : 0; 오른쪽 : 0; 상단 : 0; 하단 : 0; 배경색 : #000; 불투명도 : .4; z-index : 1000;}. 오버레이-피드 전달 {전이 : 모든 .3s 선형; & .Overlay-fade-enter, & .overlay-fade-leave {불투명 : 0! 중요; }} </style> 그런 다음 디스플레이를 관리하고 overlay 를 숨기려면 JS가 필요합니다.
'vue'import over -over -over -over -over -over -vue from'../overlay '// 오버레이 구성 요소 const 오버레이 = vue.extend (overayopt) const getdom = function (dom) {if (dom.nodetype == 3) {dom = dom.nextelementsibling || dom.nextibling getdom (dom)} return dom} // z-index 컨트롤 const zindex = 20141223 const getzindex = function () {return zindex ++} // const popupmanager = {Instances : // 모든 팝업 레이어 인스턴스를 저장하는 데 사용됩니다. this.instances.indexof (instance)! == -1) return // 커버 레이어가 없으면 커버 레이어가 표시됩니다 (this.instances.length == 0) {this.showoverlay (instast.overlayColor, instast.overlayOpacity)} this.instances.push (instance) // 개방형 팝업 박스 컨트롤 this. 다른 팝업 레이어의 투명성과 색상 // 팝업 레이어에 z-index를 추가하십시오 const dom = getdom (instance. $ el) dom.style.zindex = getzindex ()}, // 팝업 상자 닫기 닫기 (instance) {index = this.instances.indexof (index === -1) return vue.nexttick (() => { ^ { ^ { ^ ^ ^ ^ ^ ^ instances. 1) // 페이지에 팝업 레이어가 없으면 커버 레이어를 닫으십시오. getdom (오버레이. $ el) dom.style.zindex = getzindex () 오버레이.color = 색상 오버레이 = 불투명도 오버레이. 온Click = this.handleroverlayclick.bind (this) 오버레이. $ appendto (document.body) // prohibit page this.scrolling. }, CloseOverlay () {if (! this.overlay) return document.body.style.overflow = this.bodyOverFlow let het this.worday this.overlay this.overlay = null 오버레이. $ remove (() => {오버레이 ()})}, whileOverLayStyle () {if (! this. this.instances [this.instances.length -1] this.overlay.color = instance.overlayColor this.overlay.opacity = instance.overlayOpication}, // 팝업 레이어의 오버레이 클릭 메소드는 handlerOverLayClick () {if (this.instances.length == 0) [this.lint. 1] if (instance.overlayClick) {instance.overlayClick ()}}}}}}}}}}}}}} adeventListener ( 'keydown', function (event) {if (event.keyCode === 27) {// esc if (popupmanager.instances.length.length.instances.instances.instances.instances.instances.instances.instance.instans.instans.instans.inst. (! topinstance) return if (topinstance.escpress) {topinstance.escpress ()}}}}) default default popupmanager 내보내기마지막으로 믹스 인으로 캡슐화하십시오
'./popup-manager'export default {props : {show : {show : {type : boolean, default : false}, // 오버레이 레이어 오버레이를 표시할지 여부 : {type : boolean, default : true}, OverlayOpacity : {type : number, default : 0.4}, 오버레이 콜로 : {type :#000', ^ 000 ' 구성 요소가 장착되면 쇼의 값을 결정합니다. 제어가 켜집니다. 첨부 () {if (this.show && this.overlay) {popupmanager.open (this)}}, // 구성 요소가 제거 될 때 닫으십시오 () {popupmanager.close (this)}, {val) {val) {val && this. {popupmanager.close (this)}}}, beforedestroy () {popupmanager.close (this)}}사용
위의 모든 코드는 모든 팝업 레이어의 공유 논리를 완성합니다. 사용하면 믹스 인으로만로드하면됩니다.
<emplate> <div v-show = "show"wrantition = "div> <slot> </div> </div> </div> </템플릿> <style> .dialog {왼쪽 : 50%; 상단 : 50%; 변환 : 번역 (-50%, -50%); 위치 : 고정; 너비 : 90%; } .dialog-content {배경 : #fff; Border-Radius : 8px; 패딩 : 20px; 텍스트 정렬 : 센터; } .dialog-fade-transition {전이 : 불투명도 .3S 선형; } .dialog-fade-enter, .dialog-fade-leave {불투명 : 0; } </style> <cript> '../src'export default {mixins : [popup], methods : {// 오버레이 이벤트 오버레이 이벤트 오버레이 클릭 () {this.show = false}, // esc key escpress () {this.show = false}}} </script>요약
위는 vue.js 팝업 구성 요소에 대한 몇 가지 지식입니다. 나는 그것이 당신이 공부하거나 일하는 데 도움이되기를 바랍니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다. Wulin.com을 지원 해주셔서 감사합니다.