まず第一に、開発中に次の3つのポイントを考慮する必要があります。
1。アニメーション効果を入力してポップアップします。
2。Z-Indexの制御
3。オーバーレイカバー層
アニメーションについて
Vueはアニメーションを処理するのが比較的簡単です。CSSトランジションアニメーションをコンポーネントに追加するだけです
<テンプレート> <div transition = "modal-scale"> <！ - 他のコンテンツを省略 - > </div> </div> </template> <script> // ... </script> <style> .modal-scale-transition {transtion：transforming、transform、ofacity .3s ease;}。変換：スケール（1.1）;}。モーダルスケールリーブ{変換：スケール（0.8）;} </style>外部は、 v-ifまたはv-showを使用してディスプレイを制御するために、それ自体でユーザーによって制御できます。
Z-Indexコントロール
z-indexの制御に関しては、次のポイントを完了する必要があります
1.ポップアップフレームのz-index最も外側の層を持続させるのに十分な高さであることを確認してください。
2。後でポップアップするポップアップボックスのz-indexは、以前にポップアップしたものよりも高くなります。
上記の2つのポイントを満たすには、実装するには次のコードが必要です
const zindex = 20141223 //より高い値をプリセットするfirst const getzindex = function（）{return zindex ++ //各取得後、zindexは自動的に増加します}次に、コンポーネントのz-indexをバインドします
<テンプレート> <div：style = "{'z-index'：zindex}" transition = "modal-scale"> <！ - 他のコンテンツを省略 - > </div> </template> <script> export {data（）{return {zindex：getzindex（）}}} </script> </scriptカバー層のオーバーレイ制御
カバー層は、ポップアップアセンブリの最も難しい部分です。次のポイントを完了する必要があります。
1.マスキングレイヤーとポップアップレイヤーの間のアニメーションは並行する必要があります
2。カバー層のz-indexは、ポップアップ層よりも小さくする必要があります
3.カバー層がポップアップすると、コンポーネントページをスクロールする必要があります。
4.カバーレイヤーをクリックして、ポップアップレイヤーにフィードバックを提供します
5.ページ全体がせいぜい1つのカバーレイヤーしか持っていないことを確認します（複数の重複がカバーレイヤーの色を暗くするでしょう）
これらの問題に対処するためには、すべてのポップアップコンポーネントがそれぞれが解決する必要がないことを確認する必要もあります。したがって、VUEのmixinsメカニズムを使用して、これらのポップアップ層の共通のロジックを混合液にカプセル化することが決定され、各ポップアップコンポーネントが直接参照されます。
Vue-Popup-Mixin
上記のすべての問題を明確にし、Mixinの開発を開始した後、最初にoverlay （カバー層コンポーネント）が必要です。
<テンプレート> <div @click = "handlerclick" @touchmove = "prevent"：style = "style" transition = "overlay-fade"> </div> </div> </spript> export {props：{onclick：{type：function}、opacity：{type：number、default：0.4}、defult：< style（）{return {'ofacity'：this.opacity、 'background-color'：this.color}}}}}}}} {event.preventdefault（）event.stoppropagation（）}、handlerclick（）{if（this.onclick）{thisonclick（）} < lang = "less">。オーバーレイ{位置：固定;左：0;右：0;上：0;下：0;バックグラウンドカラー：＃000;不透明：.4; z-index：1000;}。オーバーレイフェードトランジション{遷移：すべて.3s線形; ＆.Overlay-fade-enter、＆.overlay-fade-leave {ofacity：0！falight; }} </style>次に、 overlayのディスプレイを管理して隠すためにJSが必要です。
'../overlay'から 'vue'import overlayoptからVueをインポートする//オーバーレイコンポーネントconst overlay = vue.extend（overlayopt）const getdom = function（dom）{if（dom.nodetype === 3）{dom = dom.nextelementionibling || dom.nextsibling 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.overlaycolor、instance.overlayopacity）} instances.push（instance） //異なるポップアップレイヤーの透明性と色を制御する//ポップアップレイヤーにz-indexを追加するconst dom = getdom（$ el）dom.style.zindex = getzindex（）}、//ポップアップボックスクローズメソッド（Instance）{let index = this.instances.indexof） this.instances.splice（index、1）//ページにポップアップレイヤーがない場合、カバーレイヤーを閉じます。 document.createelement（ 'div'）}）const dom = getdom（overlay。$ el）dom.style.zindex = getzindex（）overlay.color = color overlay.opacity = ofacity overlay.onclick = this.handleroverlayclick.bind（this）appendto（document.body）appendto（documentto（this）appentto（documentto）appentto（documentto）appetto（ document.body.style.overflow document.body.style.overflow = 'hidden'}、closeoverlay（）{if（！this.overlay）return document.body.style.overflow = this.bodyoverflow = this.overlay this.overlay = null overlay。 （）{if（！this.Overlay || this.instances.length === 0）const instance = this.instances [this.instances.length -1] this.overlay.color this.overlay.opacity = instance.overlayopacacity}、// {if（this.instances.length === 0）const instance = this.instances [this.instances.length -1] if（instance.overlayclick（）}}} window.addeventlistener（ 'keydown'、function（event）{if（event.keycode ==== 27）を返す（popupmanager.instances.length> 0）{const topinstance = popupmanager.instances [popupmanager.instances.length -1] if（！topinstance）return if（topinstance.escpress）{topinstance.escpress（）}}}最後に、それを混合物にカプセル化します
'./popup-manager'export default {props：{show：{type：boolean、default}、//オーバーレイレイヤーオーバーレイを表示するかどうか{show：{type：boolean、false}、{type：boolean、default：true}、anowrayopacacity：{type：number：default、：default：defation：{over-lay：0.4}、{typen //コンポーネントがマウントされると、ショーの値が決まります。コントロールがオンになっています。添付（）{if（this.show && this.overlay）{popupmanager.open（this）}}}}、//コンポーネントが削除されたときに閉じる（）{popupmanager.close（this）}、watch：{show（val）{// show and close method for close hatse for popupmanag expen（ } else {popupmanager.close（this）}}}}、beforedestroy（）{popupmanager.close（this）}}}使用
上記のすべてのコードは、すべてのポップアップレイヤーの共有ロジックを完了します。使用する場合、それらをミックスインとしてロードするだけです。
<テンプレート> <div v-show = "show" transition = "dialog-fade"> <div> <slot> </slot> </div> </div> </template> <style> .dialog {左：50％;トップ：50％;変換：翻訳（-50％、-50％）;位置：修正;幅：90％; } .dialog-content {background：#fff;ボーダーラジウス：8px;パディング：20px;テキストアライグ：センター; } .dialog-fade-transition {transition：ofacity .3s linear; } .dialog-fade-enter、.dialog-fade-leave {ofacity：0; } </style> <script>ポップアップをインポート '../src'export default {mixins：[popup]、methods：{//オーバーレイイベントへの応答overlayclick（）{this.show = false}、// escキーイベントへの応答{this.show = false}}}} </scrip要約します
上記は、Vue.jsポップアップコンポーネントに関するいくつかの知識ポイントです。勉強や仕事に役立つことを願っています。ご質問がある場合は、メッセージを残してコミュニケーションをとることができます。 wulin.comへのご支援ありがとうございます。