Eine Einführung in die Entwicklung von Popup-Modalbox-Komponenten in Vue.js

In diesem Artikel wird hauptsächlich der Beispielcode für die Entwicklung der Popup-Modalbox-Komponente von Vue.j vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Vorwort

Bei der Entwicklung von Projekten ist es oft notwendig, einige Popup-Box-Effekte zu entwickeln , aber die nativen Warn- und Bestätigungsfunktionen erfüllen häufig nicht die Projektanforderungen. Dieses Mal müssen bei der Entwicklung einer lesenden WebApp auf Basis von Vue.js insgesamt zwei Stellen abgefragt werden. Da zu Beginn keine anderen Komponentenbibliotheken eingeführt wurden, muss ich jetzt selbst eine modale Box-Komponente schreiben. Derzeit handelt es sich nur um eine erste Version, die nur die Anforderungen des aktuellen Projekts erfüllt. Da dieses Projekt relativ einfach ist, sind viele erweiterte Funktionen nicht enthalten. Diese Komponente bietet noch viel Raum für Erweiterungen und es können weitere benutzerdefinierte Inhalte und Stile hinzugefügt werden. Hier stellen wir nur vor, wie Sie eine modale Box-Komponente entwickeln. Wenn Sie weitere Erweiterungen benötigen, können Sie diese entsprechend Ihren eigenen Anforderungen selbst entwickeln.

Komponentenvorlage

<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>

Die modale Boxstruktur ist unterteilt in: Kopfzeilentitel, Eingabeaufforderungsinhalt und Bedienung Bereich. Gleichzeitig gibt es in der Regel eine Maskenschicht. Die Anforderungen sind dieses Mal relativ einfach und es sind keine Symbole und andere Inhalte erforderlich, sodass die Struktur relativ einfach ist. In der tatsächlichen Entwicklung kann die Struktur entsprechend den Anforderungen angepasst werden.

Komponentenstil

.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);
 }
}

Der Stil ist relativ einfach, daher werde ich nicht auf Details eingehen.

Komponentenschnittstelle

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对象,给父级组件调用
  }
 }

}

definiert drei Methoden in der Modalbox-Komponente, die Kernmethode ist Bestätigen. Diese Methode wird der übergeordneten Komponente zum Aufruf bereitgestellt und gibt ein Versprechensobjekt zurück. Der Hauptzweck der Verwendung von Promise-Objekten sind asynchrone Aufrufe, denn wenn wir modale Boxen verwenden, müssen wir oft basierend auf den zurückgegebenen Ergebnissen mit dem nächsten Schritt fortfahren.

Erweiterungstipps:

Wenn Sie erweitern müssen, können Sie über die DialogOption von props weitere Felder übergeben und in der Berechnung Urteile fällen. Fügen Sie beispielsweise ein Feld hinzu: isShowCancelButton kann steuern, ob die Schaltfläche „Abbrechen“ angezeigt wird. Das Gleiche gilt auch für andere Erweiterungen.

Aufruf

<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();
})

Quellcodeadresse

Dialogkomponenten-Quellcode

Erzielen Sie die Wirkung

Das obige ist der detaillierte Inhalt vonEine Einführung in die Entwicklung von Popup-Modalbox-Komponenten in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!