Ringkasan Poin Pengetahuan tentang komponen pop-up vue.js

Pertama -tama, tiga poin berikut perlu dipertimbangkan selama pengembangan:

1. Masuk dan pop up efek animasi.

2. Kontrol Z-Index

3. Lapisan penutup overlay

Tentang animasi

Vue relatif sederhana untuk menangani animasi, cukup tambahkan animasi transisi CSS ke komponen

 <emplate> <Div Transition = "Modal-Scale"> <!-menghilangkan konten lain-> </div> </lemplate> <script> // ... </script> <tyle> .modal-scale-transisi {transisi: transform, opacity .3s kemudahan;}. Modal-skale-enter,. skala (1.1);}. Modal-skala-leave {transform: scale (0.8);} </tyle>

Eksternal dapat dikontrol oleh pengguna dengan sendirinya, menggunakan v-if atau v-show untuk mengontrol tampilan.

Kontrol Z-Index

Mengenai kontrol z-index , poin-poin berikut perlu diselesaikan

1. Pastikan bahwa z-index dari bingkai pop-up cukup tinggi untuk membuatnya menjadi lapisan terluar.

2. z-index dari kotak pop-up yang muncul kemudian lebih tinggi dari yang muncul sebelumnya.

Untuk memenuhi dua poin di atas, kami membutuhkan kode berikut untuk diimplementasikan

 const zindex = 20141223 // preset nilai yang lebih tinggi dari const getzIndex = function () {return zindex ++ // Setelah setiap akuisisi, Zindex akan meningkat secara otomatis}

Kemudian ikat z-index pada komponen

 <lemplate> <v: style = "{'z-index': zIndex}" transition = "Modal-scale"> <!-hilangkan konten lain-> </div> </lemplate> <script> Ekspor default {data) {return {zindex: getZIndex ()}} </script>

Kontrol overlay lapisan penutup

Lapisan penutup adalah bagian paling sulit dari perakitan pop-up. Poin -poin berikut harus diselesaikan:

1. Animasi antara lapisan masking dan lapisan pop-up harus paralel

2. z-index dari lapisan penutup harus lebih kecil dari lapisan pop-up

3. Ketika lapisan penutup muncul, halaman komponen perlu digulir.

4. Klik pada lapisan penutup untuk memberikan umpan balik ke lapisan pop-up

5. Pastikan seluruh halaman hanya dapat memiliki satu lapisan penutup paling banyak (beberapa tumpang tindih akan menggelapkan warna lapisan penutup)

Untuk mengatasi masalah ini, juga perlu untuk memastikan bahwa semua komponen pop-up tidak perlu diselesaikan oleh masing-masing. Oleh karena itu, diputuskan untuk menggunakan mekanisme mixins Vue untuk merangkum logika umum dari lapisan pop-up ini ke dalam mixin, dan setiap komponen pop-up secara langsung direferensikan.

vue-popup-mixin

Setelah mengklarifikasi semua masalah di atas dan mulai mengembangkan mixin, Anda pertama -tama memerlukan overlay (komponen lapisan penutup);

 <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}}}, metode: {prevent (event) {event.preventDefault () event.stoppropagation ()}, handlerclick () {if (this.onClick) {this.onClick (), handlerclick () {if (this.onClick) {this.onClick (), handlerclick () {if (this.onClick) {this.onClick (), {ificlick) {this.onClick () {this.onClick) {this.onClick () {this.onclick () {this.onClick () {this.onClick () {this.onClick () {this.onclick () lang = "less">. overlay {position: fixed; Kiri: 0; Kanan: 0; TOP: 0; Bawah: 0; Latar Belakang: #000; opacity: .4; z-index: 1000;}. Overlay-fade-transisi {transisi: semua .3s linear; & .Overlay-fade-enter, & .Overlay-fade-leave {opacity: 0! Penting; }} </style>

Kemudian JS diperlukan untuk mengelola layar dan bersembunyi overlay .

 impor vue dari 'vue'import overlayopt dari' ../overlay '// memperkenalkan komponen overlay const overlay = vue.extend (overlayopt) const getdom = function (dom) {if (dom.nodetype === 3) {dom = dom.nexteLementibling || dom.nextsibling getdom (dom)} return dom} // z-index control const zindex = 20141223 const getzindex = function () {return zindex ++} // kelola const popupManager = {instances: [], // digunakan untuk menyimpan semua lapisan pop-up instance overlay: false,/ call Metode ini: [],// POP BOWGER OPO-UP LAPUS OPOW-UP LAPUS LINE this.instances.indexOf(instance) !== -1) return // When there is no cover layer, the cover layer is displayed if (this.instances.length === 0) { this.showOverlay(instance.overlayColor, instance.overlayOpacity) } this.instances.push(instance) // Store the open pop-up box component this.changeOverlayStyle() // Control the transparansi dan warna lapisan pop-up yang berbeda // Tambahkan z-index ke lapisan pop-up const dom = getdom (instance. $ el) dom.style.zindex = getZIndex ()}, // kotak pop-up tutup metode tutup (instance) {let index = this.instances.indexOf (instance) if (index === -1) return vue. 1) // Ketika tidak ada lapisan pop-up pada halaman, tutup lapisan sampul IF (this.instances.length === 0) {this.closeOverlay ()} this.changeOverlaystyle ()})}, showOverlay (warna, opacity) {let overlay = this.overlay = overlay overlay ({overlay) ({{{{{{{{{{{{{{{new) getdom (overlay. $ el) dom.style.zindex = getZIndex () overlay.color = overlay warna.opacity = opacity overlay.onflick = this.handleroverlayclick.bind (ini) overlay. amprampto (document.body) / / pelarangan scrolling ini. }, closeoverlay () {if (! this.overLay) return document.body.style.overflow = this.bodyOverflow let overlay = this.overlay this.overlay = null overlay. $ remeCE () = {overlay. $ dihancurkan ()})}, changeoverlaystyle () {ifer retern (! = this.instances [this.instances.length - 1] this.overlay.color = instance.overlayColor this.overlay.opacity = instance.overlayopacity}, // metode overlayclick dari ini. - 1] if (instance.overLayClick) {instance.overLayClick ()}}} window.addeventListener ('KeyDown', function (event) {if (event.keycode === 27) {// Esc if (popupManager.instances.length> 0) {const constinstance = popupran.] popUpuper. (! TopInstance) return if (topInstance.escpress) {topInstance.escpress ()}}}}) Ekspor PopupManager default

Akhirnya merangkumnya menjadi mixin

 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' } }, // Ketika komponen dipasang, itu akan menentukan nilai pertunjukan. Kontrol dihidupkan. 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)}}

menggunakan

Semua kode di atas melengkapi logika bersama dari semua lapisan pop-up. Saat digunakan, Anda hanya perlu memuatnya sebagai mixin.

 <lemplate> <v-v-show = "show" transition = "dialog-fade"> <div> <lot> </slot> </div> </div> </lemplate> <tyle> .dialog {kiri: 50%; Atas: 50%; Transform: Translate (-50%, -50%); Posisi: diperbaiki; Lebar: 90%; } .dialog-content {background: #fff; Border-Radius: 8px; padding: 20px; Teks-Align: tengah; } .dialog-fade-transisi {transisi: opacity .3s linear; } .dialog-fade-enter, .dialog-fade-leave {opacity: 0; } </tyle> <script> Impor popup dari '../src'Export default {mixins: [popup], Metode: {// Respons ke overlay event overlayclick () {this.show = false}, // respons ke Esc Event Escpress () {this.show = false}} </script>

Meringkaskan

Di atas adalah beberapa poin pengetahuan tentang komponen pop-up vue.js. Saya berharap ini akan membantu Anda belajar atau bekerja. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi. Terima kasih atas dukungan Anda ke wulin.com.