Comment implémenter une boîte de dialogue contextuelle dans vue

Ci-dessous, je vais partager avec vous une méthode d'implémentation d'une simple boîte de dialogue contextuelle dans Vue. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

L'effet est le suivant, le contenu de la boîte de dialogue est ajouté tout seul

<template>
 <p>
 <p class="dialog-wrap">
  <p class="dialog-cover" v-if="isShow" @click="closeMyself"></p>
  <transition name="drop">
  <p class="dialog-content" v-if="isShow">
   <p class="dialog-close" @click="closeMyself">x</p>
   <slot>empty</slot>
  </p>
  </transition>
 </p>
 </p>
</template>

Reçoit le paramètre isShow du composant parent et renvoie un événement personnalisé à la clôture

<script>
 export default {
 props: {
  isShow: {
  type: Boolean,
  default: false
  }
 },
 data () {
  return {
  }
 },
 methods: {
  closeMyself () {
  this.$emit(&#39;on-close&#39;)
  }
 }
 }
</script>

<style scoped>
 .drop-enter-active {
 transition: all .5s ease;
 }
 .drop-leave-active {
 transition: all .3s ease;
 }
 .drop-enter {
 transform: translateY(-500px);
 }
 .drop-leave-active {
 transform: translateY(-500px);
 }
 .dialog-wrap {
 position: fixed;
 width: 100%;
 height: 100%;
 }
 .dialog-cover {
 background: #000;
 opacity: .3;
 position: fixed;
 z-index: 5;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 .dialog-content {
 width: 50%;
 position: fixed;
 max-height: 50%;
 overflow: auto;
 background: #fff;
 top: 20%;
 left: 50%;
 margin-left: -25%;
 z-index: 10;
 border: 2px solid #464068;
 padding: 2%;
 line-height: 1.6;
 }
 .dialog-close {
 position: absolute;
 right: 5px;
 top: 5px;
 width: 20px;
 height: 20px;
 text-align: center;
 cursor: pointer;
 }
 .dialog-close:hover {
 color: #4fc08d;
 }
</style>

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Explication détaillée de la relation entre prototype et __proto__ en Javascript

Boucles Node.JS à supprimer non vides dossiers et tous les fichiers dans les sous-répertoires

La différence entre document.write et document.writeln dans js

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!