Comment implémenter des couches contextuelles et des boîtes modales dans Vue ?

Vue est un framework frontal basé sur JavaScript qui fournit de nombreux outils et composants pratiques pour créer des interfaces d'application monopage (SPA) et des interactions utilisateur. Parmi eux, la couche contextuelle (modale) et la boîte modale (popover) sont des composants d'interface utilisateur courants, qui peuvent également être facilement implémentés dans Vue. Cet article explique comment implémenter des couches contextuelles et des boîtes modales dans Vue.

1. Couche contextuelle

La couche contextuelle est généralement utilisée pour inviter des messages, afficher des menus ou des panneaux de commande, et doit généralement couvrir la totalité de la page ou une partie de la zone. L'implémentation de couches contextuelles dans Vue nécessite l'utilisation de composants et d'emplacements dynamiques.

1. Créer un composant de couche contextuelle

Tout d'abord, nous devons créer un composant de couche contextuelle. Ici, nous créons un composant de couche contextuelle nommé Modal et incluons un emplacement pour charger dynamiquement le contenu qui doit être affiché.

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}
</style>

Dans le code ci-dessus, nous définissons d'abord un composant nommé Modal et transmettons un accessoire nommé show, qui est utilisé pour contrôler si la couche contextuelle est affichée. Dans le modèle de composant, nous utilisons des emplacements dynamiques pour afficher le contenu qui doit être affiché dans la couche contextuelle. Nous avons ensuite défini certains styles pour centrer le calque contextuel et ajouté une couleur d'arrière-plan semi-transparente.

2. Utilisez le composant Modal dans le composant qui doit afficher la couche contextuelle

Ensuite, nous devons utiliser le composant Modal dans le composant qui doit afficher la couche contextuelle. Ici, nous créons un composant racine appelé App et ajoutons un bouton dans le composant pour déclencher l'affichage de la couche contextuelle.

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示弹出层</button>
    <modal v-bind:show="showModal">
      <p>这是弹出层中的内容</p>
    </modal>
  </div>
</template>

<script>
import Modal from './components/Modal.vue'

export default {
  name: 'App',
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>

Dans le code ci-dessus, nous avons d'abord importé le composant Modal précédemment défini et ajouté un bouton au modèle de composant pour déclencher l'affichage du calque contextuel. Ensuite, nous utilisons la directive v-bind pour lier l'attribut showModal à l'attribut show du composant Modal. Enfin, nous plaçons le contenu qui doit être affiché dans la couche contextuelle dans le slot du composant Modal.

2. Boîte modale

Les boîtes modales sont généralement utilisées pour inviter l'utilisateur à confirmer ou à faire une sélection, tout en empêchant l'utilisateur d'effectuer d'autres opérations avant d'effectuer l'opération. Semblables aux couches contextuelles, des composants dynamiques et des emplacements sont également requis pour implémenter des boîtes modales dans Vue.

1. Créer un composant modal

Tout d'abord, nous devons créer un composant modal. Ici, nous créons un composant modal nommé Confirmation et contenons deux emplacements, un pour afficher les informations d'invite et l'autre pour afficher les boutons de confirmation et d'annulation.

<template>
  <div class="modal-container" v-show="show">
    <div class="modal-content">
      <div class="modal-body">
        <slot name="body"></slot>
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button @click="cancel">取消</button>
          <button @click="confirm">确认</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Confirmation',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    onCancel: Function,
    onConfirm: Function
  },
  methods: {
    cancel() {
      this.onCancel && this.onCancel()
    },
    confirm() {
      this.onConfirm && this.onConfirm()
    }
  }
}
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-footer button {
  margin-left: 10px;
}
</style>

Dans le code ci-dessus, nous avons créé un composant de boîte modale nommé Confirmation et transmis les propriétés nommées show, onCancel et onConfirm, qui sont utilisées pour contrôler si la boîte modale est affichée, annuler l'opération et confirmer l'opération respectivement. Dans le modèle de composant, nous utilisons deux emplacements, un pour afficher les informations d'invite et un pour afficher les boutons de confirmation et d'annulation. Dans la méthode, nous définissons les méthodes d'annulation et de confirmation pour gérer les opérations d'annulation et de confirmation, et déclenchons la fonction de rappel transmise par le composant parent dans ces méthodes.

2. Utilisez le composant Confirmation dans le composant qui doit afficher la boîte modale

Ensuite, nous devons utiliser le composant Confirmation dans le composant qui doit afficher la boîte modale. Ici, nous créons un composant racine nommé App et ajoutons un bouton dans le composant pour déclencher le composant Confirmation pour afficher la boîte modale.

<template>
  <div class="app">
    <button @click="showModal = !showModal">显示模态框</button>
    <confirmation
      v-bind:show="showModal"
      v-bind:onCancel="cancel"
      v-bind:onConfirm="confirm"
    >
      <template v-slot:body>
        <p>确定要删除吗？</p>
      </template>
    </confirmation>
  </div>
</template>

<script>
import Confirmation from './components/Confirmation.vue'

export default {
  name: 'App',
  components: {
    Confirmation
  },
  data() {
    return {
      showModal: false
    }
  },
  methods: {
    cancel() {
      this.showModal = false
    },
    confirm() {
      alert('删除成功！')
      this.showModal = false
    }
  }
}
</script>

<style>
.app {
  padding: 20px;
}
</style>

Dans le code ci-dessus, nous utilisons le composant Confirmation comme composant de boîte modale et lions l'attribut showModal, la méthode d'annulation et la méthode de confirmation aux propriétés du composant Confirmation. Dans l'emplacement du composant Confirmation, nous affichons les informations d'invite à afficher. Dans le modèle Vue, nous utilisons la directive v-slot pour définir le slot utilisé dans le composant Confirmation, ainsi que le nom du slot (corps). Dans le composant parent, nous définissons la méthode d'annulation et la méthode de confirmation pour gérer les opérations d'annulation et de confirmation, et indiquons à l'utilisateur que la suppression a réussi lors de l'opération de confirmation.

Résumé

L'implémentation de couches contextuelles et de boîtes modales dans Vue nécessite l'utilisation de composants et d'emplacements dynamiques. En utilisant des composants comme couches contextuelles ou boîtes modales, nous pouvons facilement implémenter ces composants d'interface utilisateur courants. Dans le même temps, en transmettant la fonction de rappel au composant enfant, nous pouvons facilement gérer les opérations utilisateur dans le composant enfant et renvoyer les résultats au composant parent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!