ก่อนอื่นต้องพิจารณาสามจุดต่อไปนี้ในระหว่างการพัฒนา:
1. ป้อนและป๊อปอัพเอฟเฟกต์แอนิเมชั่น
2. การควบคุม z-index
3. ชั้นปกซ้อนทับ
เกี่ยวกับแอนิเมชั่น
Vue นั้นค่อนข้างง่ายในการจัดการกับภาพเคลื่อนไหวเพียงเพิ่ม CSS Transition Animation ลงในส่วนประกอบ
<เทมเพลต> <div transition = "modal-scale"> <!-ละเว้นเนื้อหาอื่น ๆ-> </div> </demplate> <script> // ... </script> <style> .modal-scale-transition {transition: transform, Opacity .3 มาตราส่วน (1.1);}. โมดอล-สเกลออก {แปลง: สเกล (0.8);} </style> ผู้ใช้สามารถควบคุมภายนอกได้ด้วยตัวเองโดยใช้ v-if หรือ v-show เพื่อควบคุมการแสดงผล
การควบคุมดัชนี z
เกี่ยวกับการควบคุม z-index ต้องเสร็จสิ้นประเด็นต่อไปนี้
1. ตรวจสอบให้แน่ใจว่า z-index ของเฟรมป๊อปอัพนั้นสูงพอที่จะทำให้ชั้นนอกสุด
2. z-index ของกล่องป๊อปอัพที่ปรากฏขึ้นในภายหลังนั้นสูงกว่ากล่องที่ปรากฏขึ้นมาก่อน
เพื่อให้ตรงกับสองจุดข้างต้นเราจำเป็นต้องใช้รหัสต่อไปนี้เพื่อนำไปใช้
const zindex = 20141223 // preset ค่าที่สูงกว่าค่าแรก const getzindex = function () {return zindex ++ // หลังจากการซื้อแต่ละครั้ง ZINDEX จะเพิ่มขึ้นโดยอัตโนมัติ} จากนั้นผูก z-index บนส่วนประกอบ
<เทมเพลต> <div: style = "{'z-index': zindex}" transition = "modal-scale"> <!-ละเว้นเนื้อหาอื่น ๆ-> </div> </template>การควบคุมการซ้อนทับของชั้นปก
ชั้นปกเป็นส่วนที่ยากที่สุดของการประกอบป๊อปอัพ จุดต่อไปนี้จะต้องเสร็จสิ้น:
1. ภาพเคลื่อนไหวระหว่างเลเยอร์การกำบังและเลเยอร์ป๊อปอัพจะต้องขนานกัน
2. z-index ของชั้นฝาครอบควรมีขนาดเล็กกว่าชั้นป๊อปอัพ
3. เมื่อชั้นปกปรากฏขึ้นหน้าส่วนประกอบจะต้องเลื่อน
4. คลิกที่ชั้นปกเพื่อให้ข้อเสนอแนะกับเลเยอร์ป๊อปอัพ
5. ตรวจสอบให้แน่ใจว่าทั้งหน้าสามารถมีชั้นฝาครอบเดียวได้มากที่สุดเท่านั้น
เพื่อที่จะจัดการกับปัญหาเหล่านี้ยังทำให้มั่นใจได้ว่าส่วนประกอบของป๊อปอัพทั้งหมดไม่จำเป็นต้องได้รับการแก้ไขโดยแต่ละส่วนดังนั้นจึงตัดสินใจใช้กลไก mixins ของ Vue เพื่อห่อหุ้มตรรกะทั่วไปของชั้นป๊อปอัพเหล่านี้ลงใน mixin และส่วนประกอบป๊อปอัพแต่ละรายการจะอ้างอิงโดยตรง
Vue-Popup-Mixin
หลังจากชี้แจงปัญหาทั้งหมดข้างต้นและเริ่มพัฒนา MixIn คุณต้องมี overlay (ส่วนประกอบเลเยอร์ปก) ก่อน
<เทมเพลต> <div @click = "handlerClick" @touchMove = "ป้องกัน": style = "style" transition = "Overlay-Fade"> </div> </template> <Script> การส่งออกค่าเริ่มต้น {อุปกรณ์ประกอบฉาก: {onClick: {type: function}, ความทึบ {return {'Opacity': this.Opacity, 'พื้นหลัง-สี': this.color}}}, วิธีการ: {ป้องกัน (เหตุการณ์) {event.preventdefault () event.stoppropagation ()}, handlerClick () {ถ้า (this.onclick) {ตำแหน่ง: แก้ไข; ซ้าย: 0; ขวา: 0; ด้านบน: 0; ด้านล่าง: 0; พื้นหลังสี: #000; ความทึบ: .4; z-index: 1000;}. การถ่ายภาพซ้อนทับ-เฟด-การเปลี่ยน {การเปลี่ยนแปลง:. 3S เชิงเส้นทั้งหมด; & .Overlay-Fade-Enenter, & .Overlay-Fade-Leave {Opacity: 0! สำคัญ; }} </style> จากนั้นจำเป็นต้องใช้ JS ในการจัดการจอแสดงผลและซ่อน overlay
นำเข้า Vue จาก 'Vue'import OverlayOpt จาก' ../Overlay '// แนะนำส่วนประกอบซ้อนทับ const ซ้อนทับ = vue.extend (OverlayOpt) const getDom = function (dom) {ถ้า (dom.nodetype === 3) {dom = dom.nextelementibling || dom.nextsibling getdom (dom)} return dom} // z-index ควบคุม const zindex = 20141223 const getzindex = function () {return zindex ++} // จัดการ popupmanager = {อินสแตนซ์: [] this.instances.indexof (อินสแตนซ์)! == -1) return // เมื่อไม่มีเลเยอร์ฝาครอบเลเยอร์ปกจะปรากฏขึ้นถ้า (this.instances.length === 0) {this.showoverlay (อินสแตนซ์. ความโปร่งใสและสีของเลเยอร์ป๊อปอัพที่แตกต่างกัน // เพิ่ม z-index ไปยังเลเยอร์ป๊อปอัพ const dom = getdom (อินสแตนซ์. $ el) dom.style.zindex = getzindex ()}, // วิธีปิดกล่องปิด (อินสแตนซ์) 1) // เมื่อไม่มีเลเยอร์ป๊อปอัพในหน้าปิดเลเยอร์ฝาครอบถ้า (this.instances.length === 0) {this.closeoverlay ()} this.changeOverlaystyle ()}}, showoverlay getDom (ซ้อนทับ. $ el) dom.style.zindex = getzindex () ซ้อนทับ. color = สีการซ้อนทับ. opacity = ความทึบแสงซ้อนทับ. }, closeOverlay () {ถ้า (! this.overlay) ส่งคืน document.style.overflow = this.bodyoverflow ให้ซ้อนทับ = this.overlay this.overlay = null oulday. $ remove () => {oulday. = this.instances [this.instances.length - 1] this.overlay.color = instance.overlaycolor this.overlay.Opacity = instance.overlayopacity}, // วิธีการคลิคคลิค - 1] if (instance.overlayclick) {instance.overlayclick ()}}} window.addeventListener ('keydown', ฟังก์ชั่น (เหตุการณ์) {ถ้า (event.keycode === 27) {// esc ถ้า (popupmanager.instances.length> 0) (! topinstance) return ถ้า (topinstance.escpress) {topinstance.escpress ()}}}}) การส่งออก popupmanager เริ่มต้นการส่งออกเริ่มต้นในที่สุดก็ห่อหุ้มมันลงใน mixin
นำเข้า popupManager จาก './popup-manager'export ค่าเริ่มต้น {props: {show: {type: boolean, ค่าเริ่มต้น: false}, // ไม่ว่าจะแสดงการซ้อนทับเลเยอร์ซ้อนทับ: {type: boolean, ค่าเริ่มต้น: true}, การซ้อนทับ: {type: type: {type: {type: {type: {type: type: ติดตั้งมันจะกำหนดค่าของการแสดง การควบคุมจะเปิดอยู่ แนบ () {ถ้า (this.show && this.overlay) {popupmanager.open (นี่)}}, // ปิดเมื่อส่วนประกอบถูกลบออก () {popupmanager.close (นี้)}, ดู: {แสดง (val) {// แก้ไขค่าการแสดง {popupmanager.close (this)}}}, beforedestroy () {popupmanager.close (นี่)}}ใช้
รหัสทั้งหมดข้างต้นทำตรรกะที่ใช้ร่วมกันของเลเยอร์ป๊อปอัพทั้งหมด เมื่อใช้แล้วคุณจะต้องโหลดเป็น mixin เท่านั้น
<memplate> <div v-show = "show" transition = "Dialog-Fade"> <div> <lot> </lot> </div> </div> </demplate> <style> .dialog {ซ้าย: 50%; ด้านบน: 50%; แปลง: แปล (-50%, -50%); ตำแหน่ง: แก้ไข; ความกว้าง: 90%; } .dialog-Content {background: #FFF; แนวชายแดน: 8px; Padding: 20px; TEXT-ALIGN: CENTER; } .dialog-Fade-Transition {การเปลี่ยนแปลง: ความทึบ. 3S เชิงเส้น; } .dialog-Fade-Enenter, .dialog-Fade-Leave {Opacity: 0; } </style> <script> นำเข้าป๊อปอัพจาก '../src'export ค่าเริ่มต้น {mixins: [popup], วิธีการ: {// การตอบสนองต่อเหตุการณ์ซ้อนทับซ้อนทับ () {this.show = false}, // การตอบสนองต่อเหตุการณ์คีย์ ESC () {this.show = false}}สรุป
ข้างต้นเป็นจุดความรู้บางอย่างเกี่ยวกับองค์ประกอบป๊อปอัพ vue.js ฉันหวังว่ามันจะช่วยให้คุณเรียนหรือทำงานได้ หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร ขอบคุณสำหรับการสนับสนุน Wulin.com