Buat berbilang kotak modal secara pemrograman dalam komponen yang sama dalam Vue

Question

Dalam komponen saya, saya mempunyai tiga modal timbul dengan kandungan berbeza. Dengan mengklik pada butang tertentu, saya perlu membuka modal pop timbul yang sepadan.

Inilah yang saya lakukan Untuk Butang 1 -

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

Untuk modal 1 ini akan menjadi

<s-modal v-model="isShowPopup1" :title="$t('LBL_PROD_CONT')"
    <komponen-saya
         :pageId ="ini.$options.name"
         :popupDefaultTab="popupOpenDefaultTab"
         :onClickClose="onClickclose"
    /></pra>
<p><strong>Berikut ialah kaedah klik butang. Klik acara untuk berbilang kotak modal berbeza seperti ini. </strong></p>
<pre class="brush:php;toolbar:false;">kaedah: {
  onClickProdOpen() {
   this.isShowPopup1 = benar;
   this.popupOpenDefaultTab = 0;
}
}

Jadi, bagaimanakah saya boleh menggunakan pernyataan kes suis untuk mengelak daripada mengulangi kod kotak modal beberapa kali dan hanya menukar komponen kandungan dalaman? Sebarang cadangan akan membantu.

Answer 1

Satu pilihan ialah meletakkan keadaan setiap modal dalam objek. Dengan cara ini, anda tidak perlu menambah atribut data pada setiap modal.

Jika kandungan di dalam modal cukup serupa, anda boleh menggunakan v-for, menggunakan indeks sebagai kunci dengan cara yang sama.

<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