vue+Element ui怎么实现照片墙效果

发布时间：2022-04-11 10:41:03 作者：iii
来源：亿速云阅读：772

Vue + Element UI 实现照片墙效果

在现代的 Web 开发中，照片墙效果是一种非常常见的展示方式，尤其是在图片展示类网站或应用中。通过照片墙，用户可以以更加直观和美观的方式浏览图片。本文将详细介绍如何使用 Vue.js 和 Element UI 来实现一个简单的照片墙效果。

1. 准备工作

在开始之前，我们需要确保已经安装了 Vue.js 和 Element UI。如果你还没有安装，可以通过以下命令进行安装：

# 创建一个新的 Vue 项目
vue create photo-wall

# 进入项目目录
cd photo-wall

# 安装 Element UI
npm install element-ui --save

安装完成后，我们需要在 main.js 中引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 创建照片墙组件

接下来，我们将创建一个名为 PhotoWall.vue 的组件，用于展示照片墙效果。

2.1 基本结构

首先，我们定义组件的基本结构：

<template>
  <div class="photo-wall">
    <el-row :gutter="20">
      <el-col
        v-for="(photo, index) in photos"
        :key="index"
        :span="6"
      >
        <el-card class="photo-card">
          <img :src="photo.url" alt="photo" class="photo-image" />
          <div class="photo-info">
            <span>{{ photo.title }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photos: [
        { url: 'https://via.placeholder.com/300', title: 'Photo 1' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 2' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 3' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 4' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 5' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 6' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 7' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 8' },
      ],
    };
  },
};
</script>

<style scoped>
.photo-wall {
  padding: 20px;
}

.photo-card {
  margin-bottom: 20px;
}

.photo-image {
  width: 100%;
  height: auto;
  display: block;
}

.photo-info {
  padding: 10px;
  text-align: center;
}
</style>

2.2 代码解析

el-row 和 el-col：我们使用 Element UI 的 el-row 和 el-col 组件来实现栅格布局。el-row 是行容器，el-col 是列容器。通过设置 :gutter="20"，我们为每一列之间添加了 20px 的间距。
el-card：我们使用 el-card 组件来包裹每一张图片，并为图片添加了一个标题。
photos 数据：photos 是一个包含图片 URL 和标题的数组。我们通过 v-for 指令遍历这个数组，动态生成每一张图片。
样式：我们为照片墙添加了一些基本的样式，包括图片的宽度、高度、以及卡片的内边距等。

3. 添加图片懒加载

为了提高页面加载性能，我们可以为照片墙添加图片懒加载功能。Element UI 提供了 el-image 组件，支持图片懒加载。

3.1 修改代码

我们将 img 标签替换为 el-image 组件，并启用懒加载功能：

<template>
  <div class="photo-wall">
    <el-row :gutter="20">
      <el-col
        v-for="(photo, index) in photos"
        :key="index"
        :span="6"
      >
        <el-card class="photo-card">
          <el-image
            :src="photo.url"
            alt="photo"
            class="photo-image"
            lazy
          />
          <div class="photo-info">
            <span>{{ photo.title }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

3.2 代码解析

el-image：我们使用 el-image 组件来替代 img 标签，并通过设置 lazy 属性启用懒加载功能。这样，只有当图片进入可视区域时，才会加载图片资源。

4. 添加图片预览功能

为了方便用户查看大图，我们可以为照片墙添加图片预览功能。Element UI 的 el-image 组件已经内置了预览功能。

4.1 修改代码

我们只需要在 el-image 组件中添加 preview-src-list 属性即可：

<template>
  <div class="photo-wall">
    <el-row :gutter="20">
      <el-col
        v-for="(photo, index) in photos"
        :key="index"
        :span="6"
      >
        <el-card class="photo-card">
          <el-image
            :src="photo.url"
            alt="photo"
            class="photo-image"
            lazy
            :preview-src-list="photos.map(p => p.url)"
          />
          <div class="photo-info">
            <span>{{ photo.title }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

4.2 代码解析

preview-src-list：我们通过 preview-src-list 属性传入一个包含所有图片 URL 的数组。这样，当用户点击某一张图片时，可以预览所有图片。

5. 添加分页功能

如果照片数量较多，我们可以为照片墙添加分页功能，以便用户浏览更多图片。

5.1 修改代码

我们使用 Element UI 的 el-pagination 组件来实现分页功能：

<template>
  <div class="photo-wall">
    <el-row :gutter="20">
      <el-col
        v-for="(photo, index) in paginatedPhotos"
        :key="index"
        :span="6"
      >
        <el-card class="photo-card">
          <el-image
            :src="photo.url"
            alt="photo"
            class="photo-image"
            lazy
            :preview-src-list="photos.map(p => p.url)"
          />
          <div class="photo-info">
            <span>{{ photo.title }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
      class="pagination"
      :page-size="pageSize"
      :total="photos.length"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      photos: [
        { url: 'https://via.placeholder.com/300', title: 'Photo 1' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 2' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 3' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 4' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 5' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 6' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 7' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 8' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 9' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 10' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 11' },
        { url: 'https://via.placeholder.com/300', title: 'Photo 12' },
      ],
      pageSize: 8,
      currentPage: 1,
    };
  },
  computed: {
    paginatedPhotos() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.photos.slice(start, end);
    },
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    },
  },
};
</script>

<style scoped>
.photo-wall {
  padding: 20px;
}

.photo-card {
  margin-bottom: 20px;
}

.photo-image {
  width: 100%;
  height: auto;
  display: block;
}

.photo-info {
  padding: 10px;
  text-align: center;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>

5.2 代码解析

el-pagination：我们使用 el-pagination 组件来实现分页功能。通过设置 page-size 和 total 属性，我们可以控制每页显示的图片数量和总图片数量。
paginatedPhotos：我们通过计算属性 paginatedPhotos 来动态计算当前页应该显示的图片。
handlePageChange：当用户切换页码时，handlePageChange 方法会被调用，更新 currentPage 的值，从而触发 paginatedPhotos 的重新计算。

6. 总结

通过以上步骤，我们成功地使用 Vue.js 和 Element UI 实现了一个简单的照片墙效果。我们不仅实现了基本的图片展示功能，还添加了图片懒加载、图片预览和分页功能，使得照片墙更加实用和美观。

当然，这只是一个基础的实现，你可以根据实际需求进一步扩展和优化，例如添加图片上传功能、支持动态加载更多图片、或者实现更复杂的布局效果等。希望本文能为你提供一些有用的参考，祝你在 Vue.js 和 Element UI 的开发之旅中取得更多成果！