Wie implementiert man Popup-Ebenen und modale Boxen in Vue?

Vue ist ein JavaScript-basiertes Front-End-Framework, das viele praktische Tools und Komponenten zum Erstellen von Single-Page-Application-Schnittstellen (SPA) und Benutzerinteraktionen bereitstellt. Darunter sind die Popup-Ebene (modal) und die modale Box (Popover) gängige UI-Komponenten, die auch problemlos in Vue implementiert werden können. In diesem Artikel wird erläutert, wie Popup-Ebenen und modale Boxen in Vue implementiert werden.

1. Pop-up-Ebene

Pop-up-Ebene wird im Allgemeinen verwendet, um Meldungen anzuzeigen, Menüs oder Bedienfelder anzuzeigen und muss normalerweise die gesamte Seite oder einen Teil des Bereichs abdecken. Um Popup-Ebenen in Vue zu implementieren, werden dynamische Komponenten und Slots benötigt.

1. Erstellen Sie eine Popup-Ebenenkomponente.

Zuerst müssen wir eine Popup-Ebenenkomponente erstellen. Hier erstellen wir eine Popup-Ebenenkomponente namens Modal und fügen einen Slot zum dynamischen Laden des anzuzeigenden Inhalts hinzu.

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

Im obigen Code definieren wir zunächst eine Komponente namens Modal und übergeben eine Requisiten namens show, die verwendet wird, um zu steuern, ob die Popup-Ebene angezeigt wird. In der Komponentenvorlage verwenden wir dynamische Slots, um den Inhalt anzuzeigen, der in der Popup-Ebene angezeigt werden muss. Anschließend haben wir einige Stile so eingestellt, dass die Popup-Ebene zentriert wird, und eine halbtransparente Hintergrundfarbe hinzugefügt.

2. Verwenden Sie die Modal-Komponente in der Komponente, die die Popup-Ebene anzeigen muss.

Als nächstes müssen wir die Modal-Komponente in der Komponente verwenden, die die Popup-Ebene anzeigen muss. Hier erstellen wir eine Stammkomponente namens App und fügen der Komponente eine Schaltfläche hinzu, um die Anzeige der Popup-Ebene auszulösen.

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

Im obigen Code haben wir zunächst die zuvor definierte Modal-Komponente importiert und der Komponentenvorlage eine Schaltfläche hinzugefügt, um die Anzeige der Popup-Ebene auszulösen. Dann verwenden wir die v-bind-Direktive, um das showModal-Attribut an das show-Attribut der Modal-Komponente zu binden. Abschließend platzieren wir den Inhalt, der in der Popup-Ebene angezeigt werden soll, im Slot der Modal-Komponente.

2. Modale Box

Modale Boxen werden normalerweise verwendet, um den Benutzer zum Bestätigen oder Auswählen aufzufordern und gleichzeitig zu verhindern, dass der Benutzer vor der Ausführung des Vorgangs andere Vorgänge ausführt. Ähnlich wie bei Popup-Ebenen sind auch dynamische Komponenten und Slots erforderlich, um modale Boxen in Vue zu implementieren.

1. Erstellen Sie eine modale Komponente

Zuerst müssen wir eine modale Komponente erstellen. Hier erstellen wir eine modale Komponente mit dem Namen „Confirmation“ und enthalten zwei Slots, einen für die Anzeige von Eingabeaufforderungsinformationen und den anderen für die Anzeige von Bestätigungs- und Abbruchschaltflächen.

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

Im obigen Code haben wir eine Modalbox-Komponente namens „Confirmation“ erstellt und die Eigenschaften „show“, „onCancel“ und „onConfirm“ übergeben, mit denen gesteuert wird, ob die Modalbox angezeigt wird, der Vorgang abgebrochen bzw. bestätigt wird. In der Komponentenvorlage verwenden wir zwei Slots, einen zum Anzeigen von Eingabeaufforderungsinformationen und einen zum Anzeigen von Bestätigungs- und Abbruchschaltflächen. In der Methode definieren wir die Abbruch- und Bestätigungsmethoden, um Abbruch- und Bestätigungsvorgänge abzuwickeln, und lösen die von der übergeordneten Komponente in diesen Methoden übergebene Rückruffunktion aus.

2. Verwenden Sie die Bestätigungskomponente in der Komponente, die das Modalfeld anzeigen muss.

Als nächstes müssen wir die Bestätigungskomponente in der Komponente verwenden, die das Modalfeld anzeigen muss. Hier erstellen wir eine Stammkomponente mit dem Namen App und fügen der Komponente eine Schaltfläche hinzu, um die Bestätigungskomponente zum Anzeigen des modalen Felds auszulösen.

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

Im obigen Code verwenden wir die Bestätigungskomponente als modale Boxkomponente und binden das showModal-Attribut, die Abbruchmethode und die Bestätigungsmethode an die Eigenschaften der Bestätigungskomponente. Im Slot der Bestätigungskomponente zeigen wir die anzuzeigenden Eingabeaufforderungsinformationen an. In der Vue-Vorlage verwenden wir die v-slot-Direktive, um den in der Bestätigungskomponente verwendeten Slot sowie den Namen des Slots (Body) zu definieren. In der übergeordneten Komponente definieren wir die Abbruchmethode und die Bestätigungsmethode, um Abbruch- und Bestätigungsvorgänge abzuwickeln, und teilen dem Benutzer während des Bestätigungsvorgangs mit, dass der Löschvorgang erfolgreich war.

Zusammenfassung

Die Implementierung von Popup-Ebenen und Modalboxen in Vue erfordert die Verwendung dynamischer Komponenten und Slots. Durch die Verwendung von Komponenten als Popup-Ebenen oder modale Boxen können wir diese gängigen UI-Komponenten einfach implementieren. Gleichzeitig können wir durch die Übergabe der Rückruffunktion an die untergeordnete Komponente problemlos Benutzeroperationen in der untergeordneten Komponente verarbeiten und die Ergebnisse an die übergeordnete Komponente zurückgeben.

Das obige ist der detaillierte Inhalt vonWie implementiert man Popup-Ebenen und modale Boxen in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!