まず、開発時に次の 3 つの点を考慮する必要があります:
1. アニメーション効果の入力とポップアップ。
2. Z-indexの制御
3. オーバーレイ被覆レイヤー
アニメーションについて
vue アニメーションの処理は比較的簡単で、コンポーネントにCSSトランジションアニメーションを追加するだけです
<template> <div class="modal" transition="modal-scale"> <!--省略其它内容--> </div> </template> <script> // ... </script> <style> .modal-scale-transition{ transition: transform,opacity .3s ease; } .modal-scale-enter, .modal-scale-leave { opacity: 0; } .modal-scale-enter { transform: scale(1.1); } .modal-scale-leave { transform: scale(0.8); } </style>
外部的にはユーザーが自分で制御でき、v-if または v-show を使用して表示を制御できます
z-index 制御
z-index の制御に関しては、次の点を完了する必要があります
1.ポップアップ ボックスの Z インデックスが十分であることを確認してください。エネルギーが高いため、最外層になります
2. 後でポップアップ ボックスの Z インデックスが、前にポップアップしたものよりも高くなります
上記の 2 点を満たすには、次のコードで
const zIndex = 20141223 // 先预设较高值 const getZIndex = function () { return zIndex++ // 每次获取之后 zindex 自动增加 }
を実装し、バインドする必要があります コンポーネントに z-index を配置します
<template> <div class="modal" :style="{'z-index': zIndex}" transition="modal-scale"> <!--省略其它内容--> </div> </template> <script> export default { data () { return { zIndex: getZIndex() } } } </script>
オーバーレイ コントロール
オーバーレイは最も難しい部分です完璧なオーバーレイ コントロールは、次の点を完了する必要があります:
1、カバー レイヤーとポップアップ レイヤー間のアニメーションは平行である必要があります
2. Z インデックスカバー レイヤーのサイズはポップアップ レイヤーのサイズより小さくする必要があります
3. カバー レイヤーがポップアップ表示されたら、コンポーネント ページをスクロールする必要があります
4. カバーをクリックします レイヤーはポップアップ レイヤーにフィードバックを与える必要があります。アップレイヤー
5. ページ全体に最大でも 1 つのカバーレイヤーがあることを確認します (複数のスタックによりカバーレイヤーの色が暗くなります)
これらの問題に対処するために、すべてのポップアップも確実に配置してください。ボックス コンポーネントは使用されません それぞれが解決されたため、Vue のミックスイン機構を使用して、これらのポップアップ レイヤーの共通ロジックをミックスイン レイヤーにカプセル化し、各ポップアップ ボックス コンポーネントがそれを直接参照できるようにすることにしました。
vue-popup-mixin
は、上記の問題をすべて明らかにし、ミックスインの開発を開始しました。まず、オーバーレイ (カバーレイヤーコンポーネント) が必要です。
<template> <div class="overlay" @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="less"> .overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: #000; opacity: .4; z-index: 1000; } .overlay-fade-transition { transition: all .3s linear; &.overlay-fade-enter, &.overlay-fade-leave { opacity: 0 !important; } } </style>
次に、表示を管理するための JS が必要です。オーバーレイの非表示。
import Vue from 'vue' import overlayOpt from '../overlay' // 引入 overlay 组件 const Overlay = Vue.extend(overlayOpt) const getDOM = function (dom) { if (dom.nodeType === 3) { dom = dom.nextElementSibling || dom.nextSibling getDOM(dom) } return dom } // z-index 控制 const zIndex = 20141223 const getZIndex = function () { return zIndex++ } // 管理 const PopupManager = { instances: [], // 用来储存所有的弹出层实例 overlay: false, // 弹窗框打开时 调用此方法 open (instance) { if (!instance || this.instances.indexOf(instance) !== -1) return // 当没有遮盖层时,显示遮盖层 if (this.instances.length === 0) { this.showOverlay(instance.overlayColor, instance.overlayOpacity) } this.instances.push(instance) // 储存打开的弹出框组件 this.changeOverlayStyle() // 控制不同弹出层 透明度和颜色 // 给弹出层加上z-index const dom = getDOM(instance.$el) dom.style.zIndex = getZIndex() }, // 弹出框关闭方法 close (instance) { let index = this.instances.indexOf(instance) if (index === -1) return Vue.nextTick(() => { this.instances.splice(index, 1) // 当页面上没有弹出层了就关闭遮盖层 if (this.instances.length === 0) { this.closeOverlay() } this.changeOverlayStyle() }) }, showOverlay (color, opacity) { let overlay = this.overlay = new Overlay({ el: document.createElement('div') }) const dom = getDOM(overlay.$el) dom.style.zIndex = getZIndex() overlay.color = color overlay.opacity = opacity overlay.onClick = this.handlerOverlayClick.bind(this) overlay.$appendTo(document.body) // 禁止页面滚动 this.bodyOverflow = document.body.style.overflow document.body.style.overflow = 'hidden' }, closeOverlay () { if (!this.overlay) return document.body.style.overflow = this.bodyOverflow let overlay = this.overlay this.overlay = null overlay.$remove(() => { overlay.$destroy() }) }, changeOverlayStyle () { if (!this.overlay || this.instances.length === 0) return const instance = this.instances[this.instances.length - 1] this.overlay.color = instance.overlayColor this.overlay.opacity = instance.overlayOpacity }, // 遮盖层点击处理,会自动调用 弹出层的 overlayClick 方法 handlerOverlayClick () { if (this.instances.length === 0) return const instance = this.instances[this.instances.length - 1] if (instance.overlayClick) { instance.overlayClick() } } } 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) return if (topInstance.escPress) { topInstance.escPress() } } } }) export default PopupManager
最後に、ミックスインにカプセル化されます
import PopupManager from './popup-manager' export default { props: { show: { type: Boolean, default: false }, // 是否显示遮盖层 overlay: { type: Boolean, default: true }, overlayOpacity: { type: Number, default: 0.4 }, overlayColor: { type: String, default: '#000' } }, // 组件被挂载时会判断show的值开控制打开 attached () { if (this.show && this.overlay) { PopupManager.open(this) } }, // 组件被移除时关闭 detached () { PopupManager.close(this) }, watch: { show (val) { // 修改 show 值是调用对于的打开关闭方法 if (val && this.overlay) { PopupManager.open(this) } else { PopupManager.close(this) } } }, beforeDestroy () { PopupManager.close(this) } }
上記のコードをすべて使用して、すべてのポップアップレイヤーの共通ロジックを完成させます
使用するときは、ロードするだけです。 mixin として
概要 上記は、vue.js ポップアップ コンポーネントに関するいくつかの知識ポイントです。ご質問があれば、お気軽にお問い合わせください。コミュニケーション用のメッセージ PHP 中国語 Web サイトをご利用いただきありがとうございます。 vue.js ポップアップ コンポーネントに関する知識ポイントの概要と関連記事については、PHP 中国語 Web サイトに注目してください。