Comment implémenter une mise en page déplaçable dans Vue ?

Avec le développement continu de la technologie Web front-end, de plus en plus de développeurs commencent à utiliser l'architecture SPA (Single Page Application) pour créer des applications. En tant que l'un des frameworks frontaux Web les plus populaires actuellement, Vue fournit une riche bibliothèque de composants et des outils pour faciliter la création d'applications SPA. Vue fournit également des solutions pratiques pour implémenter des mises en page déplaçables.

1. Utilisez Vue-Grid-Layout

Vue-Grid-Layout est un système de disposition de grille réactif basé sur Vue. Il fournit un ensemble de composants qui vous permettent d'implémenter facilement des dispositions de grille déplaçables et redimensionnables tout en prenant en charge le glissement gestuel et le zoom sur les appareils mobiles. Utiliser Vue-Grid-Layout est très simple, vous devez d'abord l'introduire dans le projet :

npm install vue-grid-layout -S

Ensuite, utilisez-le dans le composant Vue, comme indiqué ci-dessous :

<template>
  <vue-grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true"
                   :is-resizable="true" :vertical-compact="false" :margin="[10, 10]"
                   :use-css-transforms="true" :auto-size="true">
    <vue-grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w"
                   :h="item.h">
      <div class="grid-item-content">{{ item.i }}</div>
    </vue-grid-item>
  </vue-grid-layout>
</template>
<script>
import { VueGridLayout, VueGridItem } from 'vue-grid-layout';

export default {
  components: { VueGridLayout, VueGridItem },
  data() {
    return {
      layout: [
        { i: 'item1', x: 0, y: 0, w: 1, h: 2 },
        { i: 'item2', x: 1, y: 0, w: 1, h: 2 },
        { i: 'item3', x: 2, y: 0, w: 1, h: 2 },
        { i: 'item4', x: 3, y: 0, w: 1, h: 2 },
      ]
    }
  },
}
</script>

Dans le code ci-dessus, nous définissons un composant VueGridLayout et ajoutons le tableau de mise en page Lié à sa propriété de mise en page, chaque élément représente un élément de grille, y compris son identifiant (i), ses coordonnées x, y, ainsi que sa largeur (w) et sa hauteur (h). Nous pouvons également définir l'attribut col-num pour spécifier le nombre de colonnes dans la grille, l'attribut row-height pour définir la hauteur de chaque ligne et les attributs is-draggable et is-resizing pour spécifier si les éléments de la grille peuvent être déplacés. et redimensionnable respectivement. Vue-Grid-Layout fournit également diverses options de personnalisation qui peuvent être configurées selon les besoins.

2. Utilisez Vue-Draggable

Vue-Draggable est un autre plug-in Vue populaire, qui vous permet d'implémenter des listes déplaçables dans Vue, telles que le tri par glisser-déposer, le glisser-déposer pour changer le parent, etc. Il est très approprié pour implémenter un panneau de tâches par glisser-déposer similaire à Trello. Utiliser Vue-Draggable est également très simple. Vous devez également l'introduire en premier :

npm install vuedraggable --save

Ensuite, utilisez-le dans le composant Vue, comme indiqué ci-dessous :

<template>
  <draggable v-model="list" :options="dragOptions">
    <div v-for="(item, index) in list" :key="item.id">
      <h3 class="title">{{ item.title }}</h3>
      <p class="content">{{ item.content }}</p>
    </div>
  </draggable>
</template>
<script>
  import draggable from 'vuedraggable';

  export default {
    components: { draggable },
    data() {
      return {
        list: [
          { id: 1, title: 'Title 1', content: 'Content 1' },
          { id: 2, title: 'Title 2', content: 'Content 2' },
          { id: 3, title: 'Title 3', content: 'Content 3' },
          { id: 4, title: 'Title 4', content: 'Content 4' },
          { id: 5, title: 'Title 5', content: 'Content 5' },
        ],
        dragOptions: {
          group: {
            name: 'task',
            pull: 'clone',
            put: false
          },
          sort: false,
          animation: 150,
        },
      }
    },
  }
</script>

Dans le code ci-dessus, nous définissons un composant déplaçable et lions le tableau de liste. Sur son modèle V, chaque élément représente un élément de liste, comprenant son identifiant, son titre et son contenu. Nous pouvons également définir diverses options personnalisées via l'attribut options, telles que l'attribut group pour définir le regroupement par glisser-déposer, l'attribut sort pour définir si le tri est activé, l'attribut animation pour définir la durée de l'animation, etc.

Résumé

Il est courant d'utiliser Vue pour implémenter une mise en page déplaçable. Vue-Grid-Layout et Vue-Draggable sont deux bonnes solutions. Vue-Grid-Layout convient à la disposition en grille, qui peut réaliser une disposition en grille déplaçable et redimensionnable, et convient à la création de diverses applications interactives complexes. Vue-Draggable est principalement utilisé pour les listes glisser-déposer et est très efficace pour implémenter des panneaux de tâches glisser-déposer comme Trello. Le choix de la bonne solution dépend du cas d’utilisation spécifique, les deux sont simples et flexibles à 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!