Rendern Sie programmgesteuert mehrere modale Boxen in derselben Komponente in Vue

Question

In meiner Komponente habe ich drei Popup-Modale mit unterschiedlichem Inhalt. Durch Klicken auf eine bestimmte Schaltfläche muss ich das entsprechende Popup-Modal öffnen.

Das ist es, was ich tue Für Schaltfläche 1 -

<s-button type="button" class="bl_btn" @click="onClickProdOpen"
      Produktdetails
  </s-button>

Für dieses Modal 1 wird

<s-modal v-model="isShowPopup1" :title="$t('LBL_PROD_CONT')"
    <meine-Komponente-eins
         :pageId ="this.$options.name"
         :popupDefaultTab="popupOpenDefaultTab"
         :onClickClose="onClickclose"
    />

Hier ist eine Schaltflächenklickmethode. Klicken Sie auf Ereignisse für mehrere verschiedene modale Felder wie dieses.

methoden: {
  onClickProdOpen() {
   this.isShowPopup1 = true;
   this.popupOpenDefaultTab = 0;
}
}

Wie kann ich also eine Switch-Case-Anweisung verwenden, um zu vermeiden, dass der modale Boxcode mehrmals wiederholt wird, und nur die innere Inhaltskomponente ändern? Alle Vorschläge werden hilfreich sein.

Answer 1

一种选择是将每个模态框的状态放在一个对象中。这样，你就不需要为每个模态框添加一个数据属性。

如果模态框内的内容足够相似，你可以使用v-for，以相同的方式使用索引作为键。

<b-modal v-model="modal_states[1]">模态框1</b-modal>
    <b-button @click="openModal(1)">打开1</b-button>
    
    <b-modal v-model="modal_states[2]">模态框2</b-modal>
    <b-button @click="openModal(2)">打开2</b-button>
    
    <b-modal v-model="modal_states[3]">模态框3</b-modal>
    <b-button @click="openModal(3)">打开3</b-button>

data: {
    modal_states: {},
  },
  methods: {
    openModal(index){
      this.modal_states = {[index.toString()]:true}
    }
  },

https://codepen.io/timfranklin/pen/abWEwLy?editors=1111