Home > Article > Web Front-end > How to use Vue to implement an imitation photo wall component?
In modern web development, componentization is a very popular development model. Vue.js is a front-end framework that is very suitable for componentization. In this article, we’ll show you how to create a faux photo wall component using Vue.js.
Before we start, we need to clarify some preparations. First, we need to install Vue.js. The installation method is very simple, just enter the following command in the terminal:
npm install vue
After the installation is complete, we can create a Vue component named photo-wall
. In the template
of this component, we render a grid layout containing multiple photo cells. In the script
section, we will load a set of photos and pass them to the template
section in order to render out the photo wall component.
The following is the specific code implementation:
<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>
In this example, we first define a photos
array, which contains all the photo information to be displayed, including The id
, src
, and selected
attributes. We also define the rows
array, which is used to process and display the rows and columns of the photo wall in the Vue component.
In the mounted
hook function, we called the loadPhotos
method. This method is responsible for processing the photos
array and converting it into a two-dimensional array form, and finally displaying it in the grid layout.
selectCell
The method is used to handle the event when the user clicks on the photo in the cell. By modifying the selected
attribute, we can switch the selected state of the image very simply.
Finally, in the style
part of the component, we define style rules to control the width, height and other properties of the grid layout itself, as well as the styles of the contained cells.
Using the above code, we can implement a simple Vue.js photo wall component. By adding more interactions and effects to this component, we can create richer, more efficient web applications.
The above is the detailed content of How to use Vue to implement an imitation photo wall component?. For more information, please follow other related articles on the PHP Chinese website!