動的な幅のモーダル？

Question

ここでは、Vue.jsモーダルデモでhttps://vuejs.org/v2/examples/modal.htmlと遊んでいます。これは、スロットを介してモーダルダイアログとして表示したいコンテンツを挿入するのに便利です。 1つの欠点は、モーダルがModalコンポーネント内のCSSを介して設定された固定幅であることです。幅が動的で、私がボディスロットに渡しているコンテンツの幅によって決まるならば、私にとっては多目的になります。

サイズは、親コンポーネントによって設定することができるように私は、マウントとして「幅」小道具およびこれを追加することで、それはもう少し柔軟作った：

mounted(){ 
    if(this.width) { 
    $(".vue-modal .modal-container").css("width", this.width); 
    } 
} 

それはしかし、まだダイナミックではありませんもちろん、固定サイズで渡しています。私は誰もがこれを動作させるためのアイデアを持っているかどうか疑問に思っていますか？

Answer 1

これを実現する方法の1つは、提供されたクラスをオーバーライドすることです。 modal-wrapperにdisplay: table-cellを使用するのではなく、あなたの代わりにフレキシボックスを使用することができます。

.modal-wrapper { 
    display: flex; 
    align-items:center; 
    justify-content:center; 
    height:100%; 
} 

次に、あなただけのdisplayinline-blockに設定する必要があるとautoからwidthmodal-container上：

.modal-container{ 
    display:inline-block; 
    width:auto; 
} 

Here's your JSfiddle link based on VueJS's example