ああ、これらのモーダルウィンドウまたはVueJsのレンダリング関数が好きな理由

みなさんこんにちは！

私の最初の出版物は不快な後味でした。 私はこの誤解を正すことを約束し、あなたの法廷にVueJsに関する最初の記事のレッスンを提供します。 役に立つことを願っています。 多くの考え、多くの経験。 私は他の人の記事、教訓に沿って勉強してきました。 知識を共有する時です。

そして、モーダルウィンドウを作成します。 はい、彼らは再びです。 しかし、私の最初の（私のものではない）出版物で説明されているほど単純ではありません。



Vueの多くはすでに作成されています。 みんな使用しました。 そして、明らかに、楽器の所有権の特定のレベル（この場合はVue ）に達したら、すぐに自転車を作りたいと思うでしょう。 そして、私は規則の例外でもありませんでした。



利用可能なすべてのモーダルコンポーネントのうち、主にこれを使用しました-Vuedals 。

しかし、私はそれをアップグレードすることにしました。 原則として、 EventBusとウィンドウの開閉に関連するイベントの相互作用のみがコアから残りました。 メインコンポーネントが書き直されてラッパーコンテナーになり、新しいコンポーネント（モーダルウィンドウ自体）が追加されました。

しかし、まず最初に。 そして、記事は非常に大きくなり、誰がマスターするでしょう、そのハンサム:)



基本的に、すべての例のモーダルウィンドウは、このスタイルで呼び出されます。

<template> <button @click="visible = true">Show modal</button> <modal :show="visible"> <div>  </div> </modal> </template> <script> export default { data() { return { visible: false } } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが美しいようです。 しかし！



このアプローチの欠点は何ですか？



まず、モーダルウィンドウテンプレートは親コンポーネント内にあり、親コンポーネントと呼ばれます。 また、ウィンドウコンテキストは親から分離されていません。 必ずしも便利で必要なわけではありません。

次に、同じウィンドウが複数の場所で使用されている場合、コードを複製する必要があります。 ぶんぶんうんじゃない！



第三に、これはおそらく最も重要な欠点です-モーダルウィンドウは、ページまたは他のVueコンポーネント内でのみ使用できますが、 Vuex 、 Routerなどの場所では使用できません。 たとえば、何らかのイベントでルーターまたはストアからモーダルログイン/登録ウィンドウを呼び出す必要があります。 例はミリオンによって与えることができます。



したがって、パラメーターを使用して関数を呼び出し、次の形式の「生の」コンポーネントを渡すことでウィンドウを開閉するときに、 Vuedalsが使用するアプローチ-

 { name: 'simple-modal', props: ['test'], template: "<div>{{test}}</div>" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または外部からインポートした本格的なものが好きでした。

より多くの制御、再利用オプション、およびそのようなウィンドウをほぼどこからでも呼び出すことができます。



一般的にはこのように見えますが、 たとえば 、アプリケーションにインポートしてルートAppコンポーネントに貼り付けるModalWrapperコンポーネントがあります。 下のどこか。



次に、どこでもthis。$ Modals.openメソッド（{component：SimpleModal、title： 'Simple modal'}）を呼び出します。ここで、 ModalWrapperでレンダリングされるモーダルウィンドウを表示および表示するウィンドウとコンポーネントの設定を転送します。



ウィンドウでのすべての操作中に発生するイベントの束があり、これらのイベントはEventBusを使用して制御され、それらを聞いて何らかの形で反応することができます。



これは、情報を学習しやすくするための入力です。 基本的に、この記事はVueの初心者向けです。 しかし、私はいくつかの興味深い魅力的な瞬間があることを願っています。



途中でいくつかのコードとコメントをスローします。 最後に例とソースへのリンクがあります。



さて、メインファイルから始めましょう-





その中で、モーダルプリモーダルウィンドウに使用されるコンポーネントをインポートします。

1. ModalWrapper.js-ウィンドウを表示するための一般的なラッパー
2. Modal.js-モーダルウィンドウ自体のコンポーネント。 オリジナルのVuedalにはありません。 直接使用する必要はありません。 いずれにせよ、それは内部で機能します。 劇に沿って、あなたは耳でこの気味を見るでしょう、そして、なぜ私がそれを加えたのかが明らかになるでしょう。
3. Bus.js-ラッパーコンポーネント（ ModalWrapper ）、モーダルウィンドウ（ Modal ）、およびVueJsアプリケーション間の通信用のEventBus 。

Bus.jsコードをすぐに提供し、そこで何が起こるかを説明します。 前述したように、 EventBusは元の状態のままになりました。





ここでは、イベント（ $ on ）をサブスクライブし、イベントをトリガー（ $ emit ）できるEventBusのシングルトンインスタンスを作成します。 説明する特別なものはないと思います。 EventBusはコールバックを収集し、必要に応じてそれらを呼び出します。 さらに、すべてのコンポーネントをどのように接続するかが明確に理解できるようになります。



そして今、index.js



ここで、デフォルトのデフォルトのインストール関数をエクスポートします-ウィンドウをアプリケーション（ Vue.use（）を使用）とModalWrapper 、 ModalおよびBusコンポーネントに接続します。 ブラウザのスクリプトタグを介してVueUniversalModalを接続する場合、ページ上のグローバルVueJが接続されている場合、コンポーネントをアクティブにします。



そして順番に：





ここでは、 $ modalsと呼ばれるVueの （ プロトタイプを介した ）グローバルVueJsインスタンスにフックします。



作成されたメソッド（アプリケーションの開始直後に開始）で、 EventBusを、 開いた （ウィンドウを開く）、 閉じた （ウィンドウを閉じる）、 破棄した （ウィンドウがない、 ModalWrapperを削除する）イベントに署名します。 これらのイベントが発生すると、EventBusはmodals： open 、 modals：closed、およびmodals：destroyedイベントを$ modalsコンポーネントに出力します。 VueJsが個人的に利用可能な場合はいつでも、これらのイベントを聞くことができます。



一般に、一部は完全にオプションであったため、最初はこれらの通信の半分を捨てたいと思っていましたが、考えた後、それを残しました。 たとえば、モーダルウィンドウの統計情報を収集する場合に役立ちます。 そして初心者は、この一見混乱した$ on 、 $ emit-呼び出しで、おそらく自分で何かを理解するでしょう。



さらにこれ。$ On ...



ここでは、 $ modalsコンポーネント自体によるイベントリスナーnew 、 close 、 dismissを有効にし ます 。 これらのイベントが発生すると、 $ modalsコンポーネントの対応するメソッドが呼び出されます。 ウィンドウを開く（ open ）、閉じる（ close ）、キャンセル（ dismiss ）します。



ご覧のように、ウィンドウを閉じるには、2つの方法があります-同じオペラから閉じる（キャンセルまたはブルジョア-キャンセル-）および閉じる （閉じる）。 違いは、 closeを介してモーダルウィンドウを閉じると 、新しいモーダルウィンドウのオプションにフックするonCloseコールバック関数にデータを転送できることです（後で検討します）。



そして、実際には$ modalsコンポーネントのopen 、 close 、およびdismissメソッド 。 それらの中で、 ModalWrapperの新しい 、 close 、 dismissイベントであるEventBusを実行します。 そこで、すべての魔法が起こります。



そして、index.jsファイルのインストール機能の最後。

 Vue.mixin({ created() { this.$on('modals:new', options => { Bus.$emit('new', options); }); this.$on('modals:close', data => { Bus.$emit('close', data); }); this.$on('modals:dismiss', index => { Bus.$emit('dismiss', index); }); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、 作成されたメソッドをVueミックスインを介してすべてのVueコンポーネントに拡張し、起動時にコンポーネントがモーダル：new 、 modals：closeおよびmodals：dismissイベントをリッスンできるようにし、EventBusを介してそれらが呼び出されると、対応するイベントをModalWrapperで再度開始します



モーダルウィンドウを制御するには、これらすべての地獄のような呼び出しがここで必要です。 また、 open 、 close、およびdismissイベントをトリガーするための4つのオプションを提供します 。



アプリケーションでモーダルウィンドウを呼び出す最初の方法：

 this.$modals.open(options)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目の方法：

 this.$modals.$emit('new', options)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

第三：

 this.$emit('modals:new', options)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4番目（このメソッドの場合、Bus.jsをインポートする必要がありますが、これにより、 Vueコンポーネントからではなく、任意のスクリプトからウィンドウを呼び出すことができます）：

 Bus.$emit('new', options)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まあ、 近い 、アナロジーで却下します。



ここで、彼らが言うように-「味と色へ」。

次の患者はModal.jsか、簡単な方法を探していません

より楽しいコードが追加されます。 最近、コンポーネント（標準形式とjsx形式の両方）でレンダリング関数を使用しています 。 それらがレンダリングのためのより多くの機会を提供することに気づいたとき、私はどこでもそれを使い始めました。 レンダリング関数を使用すると、 Javascriptのすべての機能に加えて、 vNodeを備えたクールな内部VueJsキッチンが具体的なボーナスをもたらします。 それらが登場したとき、私はそれらをどういうわけか質問し、 テンプレートテンプレートにコンポーネントを描画し、何のために描画し続けました。 しかし、今、私は犬が埋葬されている場所を知っています。



モーダルは、モーダルウィンドウ自体をレンダリングする本格的なコンポーネントです。 入力パラメーターの束があります。





彼は、コード内のすべてのパラメーターについてコメントして、より明確にしました。 そして、フットクロスが機能しないように、コードをスポイラーにスローします。 たくさんのテキスト。



次：

 import CloseIcon from './close-icon' export default { name: 'vu-modal', componentName: 'vu-modal', ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初に、 SVG形式でレンダリングする機能コンポーネントの形式で十字アイコンをインポートします。





なぜ私は彼女に気付いたのか、私も知らない



次に、 nameパラメーター-これは標準的な動きです。



しかし、ここではcomponentNameは偶然ではありません。 レンダリング時にModalWrapperでさらに必要になります。



そして、計算されたパラメーターpropsData ：

 export default { ... computed: { propsData() { return (this.$parent.$vnode.data.props && this.$parent.$vnode.data.props.vModal) ? this.$parent.$vnode.data.props.vModal : this.$props } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここはもっと複雑です。



しかし、問題はこれです。 元のVuedalでは、すべてのウィンドウは上記の4つのメソッドを使用して呼び出されます。 それぞれに、ウィンドウに表示するコンポーネントとウィンドウパラメーターを渡す必要があります（これらはすべて、受信モーダルパラメーターに含まれ、さらにいくつかの新しいパラメーターが追加されます）。 また、アプリケーションの異なる部分で同じウィンドウを実行したい場合は、毎回ウィンドウパラメーター（ディメンション、その他の設定）を渡します。 これも重複です。 はい、長い間混乱しないでください。 そして、私たちプログラマーは、生き物はコアで非常に怠け者です。 したがって、このモーダルコンポーネントが作成されました。



これで、次のようなモーダルウィンドウコンポーネントを作成できます。





つまり、標準コンポーネントです。 Modal （ vu-modal ）によってラップされます。 このvu-modalに、必要なパラメーターを渡します。 これらは、このウィンドウのデフォルト値になります。



そして、このウィンドウを次のように呼び出します。

 import SimpleModal from './modals/simple' ... this.$modals.open({ component: SimpleModal })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必要なウィンドウ設定のデフォルト値はすべて、 vu-modalラッパーから取得した同じSimpleModalコンポーネントから自動的に取得されます。 必要な設定でウィンドウコンポーネントを作成した後、設定を気にせずにどこでも使用できます。 さらに、これらのデフォルト値を再割り当てする必要がある場合、このウィンドウが呼び出されるときに必要な値を指定します。

 import SimpleModal from './modals/simple' ... this.$modals.open({ component: SimpleModal, center: false })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、 中央のパラメーターがウィンドウテンプレートで指定されたデフォルトのパラメーターSimpleModalに置き換わります。



つまり、パラメーターをマージ（マージ）するときの優先順位は次のとおりです。

• props （modal.jsのデフォルト値）
• props （vu-modalでラップされたコンポーネントテンプレート内）
• オプション （ウィンドウを呼び出すとき）

低いほど重要です。



そのため、 vu-modalコンポーネントの計算されたpropsDataプロパティは、 vu-modalのこのインスタンスが何らかのコンポーネントのラッパー（ SimpleModal ）であるかどうかを考慮して、正しい入力パラメーター（ props ）を返します。

これを行うには、 ModalWrapperでウィンドウをレンダリングするときに、このウィンドウのコンポーネントがvu-modalでラップされている場合、愚かな支柱をvModalという名前で転送します。そうでない場合は、通常の支柱を転送します。



ただし、コンポーネントがvu-modalにラップされている場合、 小道具をレンダリングするときにこの親コンポーネント（ SimpleModal ）に分類されるため、親コンポーネントにvModalという名前の入力パラメーターがあるかどうかを確認します。 存在する場合、これらの値を取得します。それ以外の場合は、標準propsを取得します。



そして、 これをチェックしません$ Parent。$ Options.propsData 、しかしこれ。$ Parent。$ Vnode.data.propsは、親コンポーネントのpropsに vModalパラメーターがない場合、これをレンダリングするときにこれを見ることができるvModalは$ parent。$ vnode.data.propsです。 これには、例外なく渡したすべてのパラメーターが含まれます。 そして、それらはフィルタリングされ、余分な部分は破棄されます。



このコードをもう一度教えてください。これは、思考と混同しないように小さいものです。

 export default { ... computed: { propsData() { return (this.$parent.$vnode.data.props && this.$parent.$vnode.data.props.vModal) ? this.$parent.$vnode.data.props.vModal : this.$props } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今、おそらくすべてが明確ではない。 多くの情報がありますが、多くのレッスンのようにすべてが標準ではありません。 私はこの種の記事を初めて書いていますが、どのように教えるのが最善かはまだ明確ではありません。 おそらく多くの人がVueの内部を掘り下げていますが、それについて書く人はほとんどいません。 長い間、私はそのような瞬間に関する情報を探しました。 私は何かを見つけ、残りを自分で選びました。 そして、私はそのようなことについて話したいです。



しかし、 ModalWrapperを分解すると、より明確になります。 そこで、ステンドプロップを作成して窓に送ります。



さて、 モーダルコンポーネントのレンダリング機能（ vu-modal ）が残っています 。





ここでは珍しいことは何もないようです。



最初に、前述のpropsDataの計算値からすべてのパラメーターを引き出します。



dismissableプロパティがtrueの場合、 dismissイベント（ウィンドウのキャンセル）をトリガーする十字ボタンを表示します 。



ヘッダーを形成します-headerという名前のスロット（ this。$ Slots.header ）がvu-modalに渡される場合、 titleプロパティが渡される場合、このスロットを描画します-それを印刷します。そうでなければ、 ヘッダーをまったく表示しません。



デフォルトのスロット（ this。$ Slots.default ）の内容で本体ブロックを形成します。

そして、 フッター - フッタースロット（ this。$ Slots.footer ）が渡された場合 。

次に、 transformのcss-プロパティの正しい値を決定します：ウィンドウのtranslate（x、y） 。 つまり、ウィンドウに転送されたプロパティに応じて、パラメーターXおよびYが使用されます。 そして、レンダリング時の適切な配置のために、この変換をメインウィンドウdivにレンダリングします。



さて、全体をレンダリングし、同時に必要なクラスを計算します。



さらに、メインのdiv.vu-modal__cmp onClick-ハンドラーでevent.stopPropagation（）を使用して電話を切ると、各ウィンドウをラップし、クリックに応答するdiv （マスク）のクリックがアクティブにならないように、ウィンドウのクリックが上にポップアップしませんそしてdismissを呼び出します。 そうでない場合、マスクのこのdismissイベントが発生し、ウィンドウが閉じます。

うわー！

最後のコンポーネントはModalWrapperです

スタイルを接続します。



モーダル配列には、現在アクティブなウィンドウを保存します。



さて、 ModalWrapperコンポーネントをマウントおよび削除するとき、 キーアップハンドラーをウィンドウ （ ウィンドウがある場合）で切断し 、 handleEscapeKeyメソッドを起動します 。





次に、 Escキーが押され、ウィンドウがあり、現在の（最後に起動された）ウィンドウがある場合、 escapableプロパティはtrueになり 、この現在のウィンドウを閉じるdismissメソッドを実行します。



さて、おそらく最も興味深いことが始まっています。 コードで何が起きているのかを説明しようと思いますが、多分それは改善されるでしょう。



ModalWrapperを作成するとき、 EventBusからのイベントリスニングを有効にします 。 前述の$ modalsメソッドで実行されるもの：





その他のイベント：





次にメソッド：







dismissメソッドでは、すべてがcloseメソッドに似ています：





計算されたプロパティ：





さて、最後の機能、今私のお気に入り：





ここに物語があります。長い話。次回は必要に応じて短くしてみます。



最後に、情報をよりよく理解するためにウィンドウを開くためのコードの例を示します。

 this.$modals.open({ title: 'Modal with callbacks', component: Example, props: { lorem: true, test: true }, onDismiss() { console.log('Dismiss ok!') } onClose(data) { if(data.ended) return false console.log('Ok!') } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、たとえば、ウィンドウのボタンを使用して、そこにデータを転送するcloseを開始します。

 this.$modals.close({ ended: true })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、閉じる前に、onClose コールバックが起動されます。



同様に、onDismissは機能します。このコールバックは、たとえばフッターの[キャンセル]ボタンをクリックしたときに、クロスボタン、ウィンドウマスクをクリックするか、ウィンドウ内で直接クリックすることでトリガーされます。

 this.$modals.dismiss()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その他。レンダリング機能について。それらは確かにtemplateのコードほど見栄えがよくありません。しかし、それらでは、テンプレートでは不可能なことを行うことができますが、おそらく、松葉杖とレンダリング関数で得られるよりもはるかに多くのコードでできます。そして、で塗料成分であれば、レンダリングは非常に慎重に変更された関数props-とDATA-依存レンダリングし、そこからプロパティを、アップデートの無限のサイクル（へ行くにはそうでないリスク更新）コンポーネント。



おそらく今のところすべて。そして、彼は束を打ち切りました。しかし、私は全体の動きを説明したかった。次の記事は短くなります。しかし、私が話したいニュアンスもあります。



そして、このラインに住んでいたみんなに感謝します！



PS ここにウィンドウの例があります。ソースコードを含むGithubへのリンクもあります。ロシア語でもドキュメントを追加します。