Comment utiliser Vue pour obtenir des effets de tri pliables et par glisser-déposer ?

Dans le développement front-end, il est courant d'obtenir des effets de tri pliables et par glisser-déposer. Cette fonction peut être facilement et rapidement implémentée à l'aide du framework Vue. Cet article expliquera comment utiliser Vue pour obtenir des effets de tri pliables et par glisser-déposer, rendant la page plus belle et plus facile à utiliser.

1. Effet pliable

1.1 Écrivez du code HTML et CSS

Tout d'abord, créez les éléments qui doivent être pliés en HTML, comme indiqué ci-dessous :

<div class="collapse">
  <div class="header">折叠标题</div>
  <div class="content">折叠内容</div>
</div>

Ensuite, utilisez CSS pour styliser ces éléments.

.collapse {
  border: 1px solid #ccc;
}

.header {
  background-color: #eee;
  cursor: pointer;
  padding: 10px;
}

.content {
  padding: 10px;
}

Ici, nous avons ajouté une bordure à la boîte en accordéon, défini la couleur d'arrière-plan et le style du curseur. Dans le même temps, nous avons ajouté un événement click au titre pour changer l'état d'affichage/masqué du contenu lorsque l'on clique sur le titre.

1.2 Ajouter un composant Vue

Ensuite, nous devons créer un composant Vue pour l'effet pliable. Tout d'abord, nous voulons importer Vue :

import Vue from 'vue';

Ensuite, nous pouvons créer un composant en utilisant la méthode Vue.component() :

Vue.component('collapse', {
  props: {
    header: String,
    content: String,
  },
  data() {
    return {
      show: false, // 初始状态为隐藏
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
  template: `
    <div class="collapse">
      <div class="header" @click="toggle">{{ header }}</div>
      <div class="content" v-show="show">{{ content }}</div>
    </div>
  `,
});

Ici, nous avons créé un composant appelé « collapse ». Il peut accepter deux attributs : l'en-tête et le contenu. Nous avons utilisé la méthode data() pour créer une variable show dont la valeur initiale est fausse, indiquant que le contenu de la boîte pliable est masqué. Nous utilisons ensuite la méthode toggle() pour basculer la valeur de la variable show lorsque vous cliquez sur le titre. Enfin, nous utilisons l'attribut template pour définir la structure HTML du composant.

1.3 Utiliser des composants en HTML

Enfin, il suffit d'utiliser ce composant en HTML :

<collapse header="折叠标题" content="折叠内容"></collapse>

Ici, nous passons deux attributs au composant : l'en-tête et le contenu. Celui-ci sera affiché dans le composant respectivement sous la forme du titre et du contenu de la boîte de réduction. Après avoir cliqué sur le titre, le contenu se développera ou se réduira.

2. Effet de tri par glisser-déposer

2.1 Écriture de code HTML et CSS

Voyons d'abord comment obtenir l'effet glisser-déposer. Tout d'abord, nous créons les éléments qui doivent être triés dans le HTML, comme indiqué ci-dessous :

<div id="app">
  <div class="sortable">
    <div v-for="(item, index) in items" :key="item.id" class="item" :data-index="index">{{ item.name }}</div>
  </div>
</div>

Ensuite, nous stylisons ces éléments à l'aide de styles CSS.

.sortable {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
}

.item {
  background: #eaeaea;
  border: 1px solid #ccc;
  cursor: grab;
  margin: 10px;
  padding: 10px;
  text-align: center;
  width: 100px;
}

Ici, nous utilisons la disposition flexible pour que les éléments puissent s'enrouler automatiquement. Chaque élément a un fond et une bordure gris. Lorsque la souris le survole, le style du curseur devient « saisir », indiquant qu'il peut être déplacé.

2.2 Ajouter un composant Vue

Afin d'obtenir l'effet de tri par glisser-déposer, nous devons également ajouter un composant Vue. Encore une fois, nous voulons importer Vue :

import Vue from 'vue';

Ensuite, nous créons un composant en utilisant la méthode Vue.component() :

Vue.component('sortable', {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
      ],
    };
  },
  mounted() {
    const sortable = new Sortable(this.$el, {
      animation: 150,
      onEnd: event => {
        const item = this.items.splice(event.oldIndex, 1)[0];
        this.items.splice(event.newIndex, 0, item);
      },
    });
  },
  template: `
    <div class="sortable">
      <div v-for="(item, index) in items" :key="item.id" class="item" :data-index="index">{{ item.name }}</div>
    </div>
  `,
});

Ici, nous créons un composant appelé « triable ». Nous utilisons la méthode data() pour créer un tableau d'éléments contenant les éléments à trier. Nous utilisons ensuite la méthode Mounted() pour initialiser la bibliothèque Sortable après le chargement du composant et l'appliquer à l'élément racine du composant. Nous utilisons l'attribut template pour définir la structure HTML du composant.

À la fin du glissement, nous utilisons la méthode onEnd() pour mettre à jour le tableau des éléments. Nous utilisons la méthode splice() pour supprimer un élément du tableau items et le renvoyer, et utilisons la méthode splice() pour insérer l'élément dans une nouvelle position.

2.3 Utiliser des composants en HTML

Enfin, nous utilisons ce composant en HTML :

<sortable></sortable>

Cela nous montrera les éléments déplaçables et leur effet de tri.

Résumé

Dans cet article, nous avons présenté comment utiliser Vue pour obtenir des effets de tri pliables et par glisser-déposer. Ces technologies peuvent nous aider à rendre la conception de la page plus belle et plus facile à utiliser. Ces techniques sont extrêmement utiles pour les projets personnels et commerciaux. Nous espérons que cet article vous aidera à mieux comprendre comment utiliser Vue pour obtenir ces effets interactifs et les appliquer dans de futurs projets afin de rendre vos pages plus attrayantes et plus faciles à utiliser.

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!