Comment utiliser Vue pour implémenter un composant imitation mur de photos ?-Voir.js-php.cn

Comment utiliser Vue pour implémenter un composant imitation mur de photos ?

WBOY

Libérer： 2023-06-25 08:19:34

original

1698 Les gens l'ont consulté

Dans le développement Web moderne, la composantisation est un modèle de développement très populaire. Vue.js est un framework front-end très adapté à la composantisation. Dans cet article, nous allons vous montrer comment créer un faux composant de mur de photos à l'aide de Vue.js.

Avant de commencer, nous devons clarifier certains préparatifs. Tout d’abord, nous devons installer Vue.js. La méthode d'installation est très simple, entrez simplement la commande suivante dans le terminal :

npm install vue

Copier après la connexion

Une fois l'installation terminée, nous pouvons créer un composant Vue nommé photo-wall. Dans le modèle du composant, nous affichons une disposition en grille contenant plusieurs cellules photo. Dans la section script, nous allons charger un ensemble de photos et les transmettre à la section template afin de restituer le composant du mur de photos. photo-wall 的 Vue 组件。在该组件的 template 中，我们会渲染一个包含多个照片单元的网格布局。在 script 部分，我们将加载一组照片并将其传递给 template 部分，以便渲染出照片墙组件。

下面是具体的代码实现：

<template>
  <div class="photo-wall">
    <div class="row" v-for="row in rows">
      <div class="cell" v-for="cell in row">
        <img :src="cell.src" @click="selectCell(cell)" :class="{ selected: cell.selected }">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photos: [
        { id: 1, src: 'https://via.placeholder.com/300x200?text=Photo+1', selected: false },
        { id: 2, src: 'https://via.placeholder.com/300x200?text=Photo+2', selected: false },
        { id: 3, src: 'https://via.placeholder.com/300x200?text=Photo+3', selected: false },
        { id: 4, src: 'https://via.placeholder.com/300x200?text=Photo+4', selected: false },
        { id: 5, src: 'https://via.placeholder.com/300x200?text=Photo+5', selected: false },
        { id: 6, src: 'https://via.placeholder.com/300x200?text=Photo+6', selected: false },
        { id: 7, src: 'https://via.placeholder.com/300x200?text=Photo+7', selected: false },
        { id: 8, src: 'https://via.placeholder.com/300x200?text=Photo+8', selected: false },
        { id: 9, src: 'https://via.placeholder.com/300x200?text=Photo+9', selected: false },
        { id: 10, src: 'https://via.placeholder.com/300x200?text=Photo+10', selected: false },
        { id: 11, src: 'https://via.placeholder.com/300x200?text=Photo+11', selected: false },
        { id: 12, src: 'https://via.placeholder.com/300x200?text=Photo+12', selected: false },
        { id: 13, src: 'https://via.placeholder.com/300x200?text=Photo+13', selected: false },
        { id: 14, src: 'https://via.placeholder.com/300x200?text=Photo+14', selected: false },
        { id: 15, src: 'https://via.placeholder.com/300x200?text=Photo+15', selected: false },
        { id: 16, src: 'https://via.placeholder.com/300x200?text=Photo+16', selected: false },
        { id: 17, src: 'https://via.placeholder.com/300x200?text=Photo+17', selected: false },
        { id: 18, src: 'https://via.placeholder.com/300x200?text=Photo+18', selected: false }
      ],
      rows: []
    }
  },
  mounted() {
    this.loadPhotos()
  },
  methods: {
    loadPhotos() {
      let rowCount = Math.ceil(this.photos.length / 6)
      let photosIndex = 0
      for (let i = 0; i < rowCount; i++) {
        let row = []
        for (let j = 0; j < 6; j++) {
          if (photosIndex >= this.photos.length) break
          row.push(this.photos[photosIndex])
          photosIndex++
        }
        this.rows.push(row)
      }
    },
    selectCell(cell) {
      cell.selected = !cell.selected
    }
  }
}
</script>

<style>
.photo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height: 500px;
  padding: 20px;
}

.cell {
  width: calc(33.33% - 10px);
  margin-bottom: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selected {
  border: 3px solid #007aff;
}
</style>

Copier après la connexion

在这个示例中，我们首先定义了一个 photos 数组，其中包含了所有要显示的照片信息，包括 id、src、和 selected 属性。我们还定义了 rows 数组，用于在 Vue 组件中处理并显示照片墙的各行和列。

在 mounted 钩子函数中，我们调用了 loadPhotos 方法。这个方法负责对 photos 数组进行处理，并将其转化为二维数组形式，最终在网格布局中显示。

selectCell 方法则用于处理当用户点击单元格中的照片时的事件。通过修改 selected 属性，我们可以非常简单地切换图片的选择状态。

最后，在组件的 style

Voici l'implémentation spécifique du code :

rrreee

Dans cet exemple, nous définissons d'abord un tableau photos, qui contient toutes les informations sur la photo à afficher, y compris id , src et selected. Nous définissons également le tableau rows, qui est utilisé pour traiter et afficher les lignes et colonnes du mur de photos dans le composant Vue. 🎜🎜Dans la fonction hook Mounted, nous avons appelé la méthode loadPhotos. Cette méthode est responsable du traitement du tableau photos et de sa conversion en un tableau bidimensionnel, qui est finalement affiché dans la disposition en grille. La méthode 🎜🎜selectCell est utilisée pour gérer les événements lorsque l'utilisateur clique sur la photo dans la cellule. En modifiant l'attribut selected, on peut changer l'état sélectionné de l'image très simplement. 🎜🎜Enfin, dans la section style du composant, nous définissons des règles de style pour contrôler la largeur, la hauteur et d'autres propriétés de la disposition de la grille elle-même, ainsi que les styles des cellules contenues. 🎜🎜En utilisant le code ci-dessus, nous pouvons implémenter un simple composant de mur de photos Vue.js. En ajoutant plus d'interactions et d'effets à ce composant, nous pouvons créer des applications Web plus riches et plus efficaces. 🎜

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!