Grundlagen der VUE3-Entwicklung: Verwenden Sie das Vue.js-Plug-in, um die Faltpanel-Komponente zu kapseln

VUE3-Entwicklungsgrundlagen: Verwenden Sie das Vue.js-Plug-in, um die Faltpanel-Komponente zu kapseln

Das Faltpanel ist eine gängige UI-Komponente, die zum Erweitern und Reduzieren von Inhalten verwendet werden kann. In Vue.js können wir Direktiven oder Komponenten verwenden, um Akkordeon-Panels zu implementieren. Die Entwicklung doppelter Komponenten ist jedoch eine mühsame Aufgabe, daher ist die Verwendung des Vue.js-Plug-Ins zum Kapseln der Accordion-Panel-Komponente eine bessere Lösung.

In diesem Artikel wird die Verwendung des Vue.js-Plug-Ins zum Kapseln der Faltpanel-Komponente vorgestellt, einschließlich der Installation, Verwendung und Konfiguration des Plug-Ins. Wir verwenden Vue3 als Entwicklungsumgebung und Vite als Build-Tool.

Schritt 1: Projekt erstellen und Vue.js installieren

Zuerst müssen wir ein neues Vue.js-Projekt erstellen. Geben Sie den folgenden Befehl ein:

npm init vite-app vue3-fold-panel

Dadurch wird ein neues Vite-Projekt erstellt und es „vue3 -fold-“ genannt. Panel".

Als nächstes müssen wir Vue.js installieren. Es kann mit dem folgenden Befehl installiert werden:

npm install vue@next

Nachdem die Installation abgeschlossen ist, können wir eine neue Vue-Instanz im Projekt erstellen:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Schritt 2: Schreiben Sie die Akkordeon-Panel-Komponente

Bevor wir mit dem Packen der Akkordeon-Panel-Komponente beginnen , wir müssen es zuerst definieren. Erstellen Sie einen neuen Ordner im Verzeichnis src/components und nennen Sie ihn „FoldPanel“. Erstellen Sie in diesem Ordner eine Datei mit dem Namen „FoldPanel.vue“ und schreiben Sie den folgenden Code:

<template>
  <div class="fold-panel">
    <div class="fold-panel-header" @click="togglePanel"> {{ title }} </div>
    <div class="fold-panel-body" v-show="showPanel">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FoldPanel',
  data() {
    return {
      showPanel: false,
    }
  },
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  methods: {
    togglePanel() {
      this.showPanel = !this.showPanel
    },
  },
}
</script>

<style scoped>
.fold-panel {
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.fold-panel-header {
  padding: 10px;
  cursor: pointer;
}

.fold-panel-body {
  padding: 10px;
}
</style>

In dieser Komponente verwenden wir die neue Funktion „“, die es uns ermöglicht, Inhalte in die Komponente einzufügen. Die Akkordeon-Komponente besteht aus zwei Teilen: Titel und Inhalt. Wenn der Benutzer auf den Titel klickt, kann der Inhaltsbereich minimiert oder erweitert werden.

Wir definieren eine Methode namens „togglePanel“, um den erweiterten oder reduzierten Zustand des Inhaltsteils umzuschalten. Wir definieren außerdem eine Variable „showPanel“, die aufzeichnet, ob der Inhaltsteil angezeigt werden soll.

Schritt 3: Plugin erstellen und Komponente registrieren

Als nächstes erstellen wir ein Plugin, das unsere Akkordeon-Komponente global registriert.

Erstellen Sie im Verzeichnis src/plugins eine Datei mit dem Namen „fold-panel.js“ und schreiben Sie den folgenden Code:

import FoldPanel from '../components/FoldPanel/FoldPanel.vue'

export default {
  install(app) {
    app.component(FoldPanel.name, FoldPanel)
  },
  FoldPanel,
}

Dieses Plugin enthält nur eine Methode zur globalen Registrierung des Faltpanels. Wir verwenden die Funktion „app.component“, um die Komponente in der Vue-Instanz zu registrieren. Das Plugin gibt außerdem ein Objekt namens „FoldPanel“ zurück, das es uns ermöglicht, die Komponente mithilfe von „import { FoldPanel } from ‚fold-panel‘“ in die Komponente zu importieren.

Schritt 4: Installieren Sie das Plugin in Vue.js

Jetzt können wir das Plugin in unserer Vue.js-Anwendung installieren. Öffnen Sie die Datei src/main.js und verwenden Sie den folgenden Code, um das Plugin zu installieren:

import { createApp } from 'vue'
import App from './App.vue'
import FoldPanelPlugin from './plugins/fold-panel'

const app = createApp(App)

app.use(FoldPanelPlugin)

app.mount('#app')

Beachten Sie, dass wir zur Installation des Plugins die neue API „app.use“ von Vue.js 3 verwendet haben.

Schritt 5: Verwendung der Akkordeon-Panel-Komponente

Jetzt können wir unsere Akkordeon-Panel-Komponente in jeder Vue-Komponente verwenden. Fügen Sie einfach den folgenden Code in Ihre Vorlage ein:

<template>
  <div>
    <fold-panel title="折叠面板1">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

<script>
import { FoldPanel } from 'fold-panel'

export default {
  components: {
    FoldPanel,
  },
}
</script>

Dadurch werden auf der Seite zwei Akkordeonfelder mit jeweils einem Titel und einem Inhaltsabschnitt angezeigt. Wenn der Benutzer auf den Paneltitel klickt, wird der Inhaltsbereich erweitert oder reduziert.

Schritt 6: Konfigurieren Sie die Komponente

Unsere Akkordeon-Panel-Komponente kann auch über Eigenschaften angepasst werden. Hier sind einige der Haupteigenschaften:

1. Titel: Der Titel des Akkordeon-Panels.
2. isCollapsed: Gibt an, ob das Faltfeld zunächst minimiert ist. Der Standardwert ist „false“ (d. h. der erweiterte Zustand).

<template>
  <div>
    <fold-panel title="折叠面板1" :isCollapsed="true">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

In diesem Beispiel wird „Panel 1 einklappen“ zunächst ausgeblendet. Wir können diese Eigenschaft während der Initialisierung über die Vorlage festlegen.

3. showIcon: Geben Sie an, ob das Symbol zum Erweitern/Reduzieren angezeigt werden soll. Der Standardwert ist wahr.

<template>
  <div>
    <fold-panel title="折叠面板1" :showIcon="false">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

In diesem Beispiel wird bei „Panel 1 reduzieren“ das Symbol zum Erweitern/Reduzieren nicht angezeigt.

4. iconPosition: Geben Sie die Position des Symbols zum Erweitern/Reduzieren an. Der Standardwert ist „left“, also die linke Seite.

<template>
  <div>
    <fold-panel title="折叠面板1" iconPosition="right">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

In diesem Beispiel wird rechts das Symbol zum Erweitern/Reduzieren für „Panel 1 reduzieren“ angezeigt.

Zu diesem Zeitpunkt ist unsere Faltplattenkomponente verpackt. Die Verwendung von Vue.js-Plugins zum Kapseln von Komponenten reduziert nicht nur doppelten Code, sondern macht den Code auch modularer und erweiterbarer.

Das obige ist der detaillierte Inhalt vonGrundlagen der VUE3-Entwicklung: Verwenden Sie das Vue.js-Plug-in, um die Faltpanel-Komponente zu kapseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!