Vue の同じコンポーネント内の複数のモーダル ボックスをプログラムでレンダリングする
<p>私のコンポーネントには、異なるコンテンツを持つ 3 つのポップアップ モーダルがあります。特定のボタンをクリックして、対応するポップアップ モーダルを開く必要があります。 </p>
<p>これが私がやっていることです
<strong>ボタン 1 の場合 -</strong></p>
<pre class="brush:php;toolbar:false;"><s-button type="button" class="bl_btn" @click="onClickProdOpen">
製品詳細
</s-button></pre>
<p><strong>このモーダルの場合、1 は </strong></p> になります。
<pre class="brush:php;toolbar:false;"><s-modal v-model="isShowPopup1" :title="$t('LBL_PROD_CONT')"
<私のコンポーネント-1
:pageId ="this.$options.name"
:popupDefaultTab="ポップアップオープンデフォルトタブ"
:onClickClose="onClickclose"
/>
<p><strong>ここではボタンのクリック方法を説明します。このように、複数の異なるモーダル ボックスのクリック イベント。 </strong></p>
<pre class="brush:php;toolbar:false;">メソッド: {
onClickProdOpen() {
this.isShowPopup1 = true;
this.popupOpenDefaultTab = 0;
}
}</pre>
<p><s-modal はカスタム モーダル ボックス パーツであり、内容は異なります。そこで、このモーダル コードを繰り返し、コンテンツを変更するだけです。つまり、異なる子コンポーネント (MyComponentOne、MyComponentTwo...) を渡しました。 </p>
<p>それでは、switch case ステートメントを使用して、モーダル ボックス コードを複数回繰り返すことを避け、内部コンテンツ コンポーネントのみを変更するにはどうすればよいでしょうか?あらゆる提案が役に立ちます。 </p>
