Détails du produit Pour ce modal 1, ce sera Restituer par programme plusieurs boîtes modales dans le même composant dans Vue-Questions et réponses sur le réseau chinois PHP
Restituer par programme plusieurs boîtes modales dans le même composant dans Vue
P粉627027031
P粉627027031 2023-08-28 16:23:40
0
1
514

Dans mon composant, j'ai trois modaux contextuels avec un contenu différent. En cliquant sur un bouton spécifique, je dois ouvrir la fenêtre contextuelle correspondante.

C'est ce que je fais Pour le bouton 1 -

 détails du produit 

Pour ce modal 1 sera

 

Voici une méthode de clic sur un bouton. Cliquez sur les événements pour plusieurs boîtes modales différentes comme celle-ci.

méthodes : { onClickProdOpen() { this.isShowPopup1 = vrai ; this.popupOpenDefaultTab = 0 ; } } 

Alors, comment puis-je utiliser une instruction switch case pour éviter de répéter le code de la boîte modale plusieurs fois et simplement modifier le composant de contenu interne ? Toutes les suggestions seront utiles.

P粉627027031
P粉627027031

répondre à tous (1)
P粉256487077

Une option consiste à mettre l'état de chaque modal dans un objet. De cette façon, vous n'avez pas besoin d'ajouter un attribut de données à chaque modal.

Si le contenu à l'intérieur du modal est suffisamment similaire, vous pouvez utiliser v-for, en utilisant l'index comme clé de la même manière.

模态框1 打开1 模态框2 打开2 模态框3 打开3
data: { modal_states: {}, }, methods: { openModal(index){ this.modal_states = {[index.toString()]:true} } },

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

    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!