Bases du développement VUE3 : utilisez le plug-in Vue.js pour encapsuler le composant du panneau pliable

Bases du développement VUE3 : utilisez le plug-in Vue.js pour encapsuler le composant du panneau pliable

Le panneau pliable est un composant d'interface utilisateur courant qui peut être utilisé pour développer et réduire le contenu. Dans Vue.js, nous pouvons utiliser des directives ou des composants pour implémenter des panneaux accordéon. Cependant, développer des composants en double est une tâche fastidieuse, donc utiliser un plug-in Vue.js pour encapsuler le composant du panneau accordéon est une meilleure solution.

Cet article expliquera comment utiliser le plug-in Vue.js pour encapsuler le composant du panneau pliable, y compris l'installation, l'utilisation et la configuration du plug-in. Nous utilisons Vue3 comme environnement de développement et Vite comme outil de construction.

Étape 1 : Créer un projet et installer Vue.js

Tout d'abord, nous devons créer un nouveau projet Vue.js, entrez la commande suivante :

npm init vite-app vue3-fold-panel

Cela créera un nouveau projet Vite et le nommera « vue3 -fold- panneau".

Ensuite, nous devons installer Vue.js. Il peut être installé à l'aide de la commande suivante :

npm install vue@next

Une fois l'installation terminée, nous pouvons créer une nouvelle instance de Vue dans le projet :

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

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

Étape 2 : Écrire le composant du panneau accordéon

Avant de commencer à empaqueter le composant du panneau accordéon , nous devons d’abord le définir. Créez un nouveau dossier dans le répertoire src/components et nommez-le « FoldPanel ». Dans ce dossier, créez un fichier appelé "FoldPanel.vue" et écrivez le code suivant :

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

Dans ce composant, nous utilisons la nouvelle fonctionnalité "58cb293b8600657fad49ec2c8d37b472" dans Vue3, qui nous permet d'insérer du contenu dans le composant. Le composant accordéon se compose de deux parties : le titre et le contenu. Lorsque l'utilisateur clique sur le titre, la section de contenu peut être réduite ou développée.

Nous définissons une méthode appelée "togglePanel" pour basculer entre l'état développé ou réduit de la partie contenu. Nous définissons également une variable "showPanel" qui enregistre si la partie contenu doit être affichée.

Étape 3 : Créer un plugin et enregistrer un composant

Ensuite, nous créerons un plugin qui enregistrera notre composant accordéon globalement.

Dans le répertoire src/plugins, créez un fichier nommé "fold-panel.js" et écrivez le code suivant :

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

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

Ce plugin contient uniquement une méthode pour enregistrer le panneau pliant globalement. Nous utilisons la fonction "app.component" pour enregistrer le composant dans l'instance Vue. Le plugin renvoie également un objet nommé "FoldPanel", qui nous permet d'importer le composant en utilisant "import { FoldPanel } from 'fold-panel'" dans le composant.

Étape 4 : Installez le plugin dans Vue.js

Maintenant, nous pouvons installer le plugin dans notre application Vue.js. Ouvrez le fichier src/main.js et utilisez le code suivant pour installer le plugin :

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

Notez que nous avons utilisé la nouvelle API « app.use » de Vue.js 3 pour installer le plugin.

Étape 5 : Utilisation du composant panneau accordéon

Maintenant, nous pouvons utiliser notre composant panneau accordéon dans n'importe quel composant Vue. Insérez simplement le code suivant dans votre modèle :

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

Cela affichera deux panneaux en accordéon sur la page, chacun avec un titre et une section de contenu. Lorsque l'utilisateur clique sur le titre du panneau, la section de contenu se développe ou se réduit.

Étape 6 : Configurer le composant

Notre composant de panneau accordéon peut également être personnalisé via les propriétés Voici quelques-unes des propriétés principales :

1. titre : Le titre du panneau accordéon.
2. isCollapsed : Spécifie si le panneau pliable est initialement réduit. La valeur par défaut est false (c'est-à-dire l'état développé).

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

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

Dans cet exemple, « Réduire le panneau 1 » sera initialement réduit. Nous pouvons définir cette propriété via le modèle lors de l'initialisation.

3. showIcon : Spécifiez s'il faut afficher l'icône de développement/réduction. La valeur par défaut est vrai.

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

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

Dans cet exemple, « Réduire le panneau 1 » n'affichera pas l'icône développer/réduire.

4. iconPosition : Spécifiez la position de l'icône de développement/réduction. La valeur par défaut est « gauche », qui correspond au côté gauche.

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

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

Dans cet exemple, l'icône développer/réduire pour « Réduire le panneau 1 » sera affichée à droite.

À ce stade, notre composant de panneau pliant a été emballé. L'utilisation des plugins Vue.js pour encapsuler des composants réduit non seulement le code en double, mais rend également le code plus modulaire et extensible.

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!