Une introduction à la façon de développer des composants de boîte modale contextuelle dans Vue.js

Cet article présente principalement l'exemple de code pour le développement du composant de boîte modale pop-up Vue.js. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Avant-propos

Dans le processus de développement de projets, il est souvent nécessaire de développer des effets de boîtes pop-up , mais l'alerte et la confirmation natives ne parviennent souvent pas à répondre aux exigences du projet. Cette fois, lors du développement d'une WebApp de lecture basée sur Vue.js, il y a un total de deux endroits qui doivent être invités. Parce qu'aucune autre bibliothèque de composants n'a été introduite au début, je dois maintenant écrire moi-même un composant de boîte modale. Pour l'instant, il ne s'agit que d'une version initiale qui ne répond qu'aux besoins du projet actuel. Ce projet étant relativement simple, il ne conserve pas beaucoup de fonctions étendues. Ce composant a encore beaucoup de place pour l'expansion, et davantage de contenu et de styles personnalisés peuvent être ajoutés. Ici, nous présentons uniquement comment développer un composant de boîte modale. Si vous avez besoin de plus d'extensions, vous pouvez le développer vous-même en fonction de vos propres besoins.

Modèle de composant

<template>
<p class="dialog">
 <p class="mask"></p>
 <p class="dialog-content">
  <h3 class="title">{{ modal.title }}</h3>
  <p class="text">{{ modal.text }}</p>
  <p class="btn-group">
   <p class="btn" @click="cancel">{{ modal.cancelButtonText }}</p>
   <p class="btn" @click="submit">{{ modal.confirmButtonText }}</p>
  </p>
 </p>
</p>
</template>

La structure de la boîte modale est divisée en : titre d'en-tête, contenu de l'invite et fonctionnement zone. En même temps, il existe généralement un calque de masque. Cette fois, les exigences sont relativement simples et il n'y a pas besoin d'icônes ni d'autres contenus, la structure est donc relativement simple. En cours de développement, la structure peut être ajustée en conséquence en fonction des besoins.

Style des composants

.dialog {
 position: relative;

 .dialog-content {
  position: fixed;
  box-sizing: border-box;
  padding: 20px;
  width: 80%;
  min-height: 140px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: #fff;
  z-index: 50002;
  .title {
   font-size: 16px;
   font-weight: 600;
   line-height: 30px;
  }
  .text {
   font-size: 14px;
   line-height: 30px;
   color: #555;
  }
  .btn-group {
   display: flex;
   position: absolute;
   right: 0;
   bottom: 10px;
   .btn {
    padding: 10px 20px;
    font-size: 14px;
    &:last-child {
     color: #76D49B;
    }
   }
  }
 }
 .mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 50001;
  background: rgba(0,0,0,.5);
 }
}

Le style est relativement simple, je n'entrerai donc pas dans les détails.

Interface du composant

export default {
 name: 'dialog',
 props: {
  dialogOption: Object
 },
 data() {
  return {
   resolve: '',
   reject: '',
   promise: '', // 保存promise对象
  }
 },
 computed: {
  modal: function() {
   let options = this.dialogOption;
   return {
    title: options.title || '提示',
    text: options.text,
    cancelButtonText: options.cancelButtonText ? options.cancelButtonText : '取消',
    confirmButtonText: options.confirmButtonText ? options.confirmButtonText : '确定',
   }
  }
 },
 methods: {
  //确定,将promise断定为完成态
  submit() {
   this.resolve('submit');
  },
  // 取消,将promise断定为reject状态
  cancel() {
   this.reject('cancel');
  },
  //显示confirm弹出,并创建promise对象，给父组件调用
  confirm() {
   this.promise = new Promise((resolve, reject) => {
    this.resolve = resolve;
    this.reject = reject;
   });
   return this.promise; //返回promise对象,给父级组件调用
  }
 }

}

définit trois méthodes dans le composant de boîte modale, la méthode principale est la confirmation. Cette méthode est fournie au composant parent pour appeler et renvoie un objet de promesse. L'objectif principal de l'utilisation des objets de promesse est les appels asynchrones, car souvent, lorsque nous utilisons des boîtes modales, nous devons passer à l'étape suivante en fonction des résultats renvoyés.

Conseils d'extension :

Si vous avez besoin d'étendre, vous pouvez transmettre plus de champs via l'option de dialogue des accessoires et porter des jugements calculés. Par exemple, en ajoutant un champ isShowCancelButton. peut contrôler si le bouton d'annulation est affiché. Il en va de même pour les autres extensions.

Appel

<v-dialog v-show="showDialog" :dialog-option="dialogOption" ref="dialog"></v-dialog>

this.showDialog = true;
this.$refs.dialog.confirm().then(() => {
 this.showDialog = false;
 next();
}).catch(() => {
 this.showDialog = false;
 next();
})

Adresse du code source

Code source du composant de dialogue

Obtenir l'effet

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!