查看大图

不生产代码的代码搬运工
226 阅读5分钟

实现思路

1. 设计数据模型

  • 目的：定义图片的数据结构，包括小图和大图的URL。

  • 实现：

    1. 在Vue组件中定义一个数据属性image，包含thumbnail和large两个字段。
    2. thumbnail字段存储小图的URL，large字段存储大图的URL。

2. 获取图片数据

  • 目的：从服务器或其他数据源获取图片数据。

  • 实现：

    1. 使用axios或fetch API发起请求，获取包含图片信息的JSON数据。
    2. 解析返回的JSON数据，并将图片URL存储到image数据属性中。

3. 渲染小图

  • 目的：在页面上显示小图，并绑定点击事件。

  • 实现：

    1. 使用<img>标签渲染小图，src属性指向image.thumbnail。
    2. 为<img>元素添加@click事件监听器，调用showLargeImage方法。

4. 显示大图

  • 目的：当用户点击小图时，在页面上展示对应的大图。

  • 实现：

    1. 定义一个名为showLargeImage的方法。
    2. 方法内部调用this.$refs.largeImage.src = this.image.large来更新大图的src属性。
    3. 使用<transition>组件包裹大图，添加动画效果。
    4. 切换大图显示状态，可以通过添加/移除class的方式来控制显示与隐藏。

5. 实现大图展示逻辑

  • 目的：创建一个用于展示大图的组件，并处理显示逻辑。

  • 实现：

    1. 创建一个名为LargeImageViewer的Vue组件。
    2. 通过props传递largeImageUrl给LargeImageViewer组件。
    3. 在LargeImageViewer组件中使用<img>标签显示大图，src属性绑定largeImageUrl。
    4. 添加关闭按钮，点击时调用父组件的方法来关闭大图展示。

6. 处理点击事件

  • 目的：当用户点击小图时，触发大图的显示。

  • 实现：

    1. 在showLargeImage方法中设置一个标志位isLargeImageVisible为true。
    2. 监听isLargeImageVisible的变化，当变为true时显示大图。

7. 添加过渡动画

  • 目的：增加过渡动画使大图的展示更加平滑。

  • 实现：

    1. 使用Vue的<transition>组件包裹大图元素。
    2. 定义CSS类来控制动画效果，如enter-active-class、leave-active-class等。
    3. 为大图添加v-if指令，根据isLargeImageVisible控制显示/隐藏。

8. 关闭大图

  • 目的：当用户点击关闭按钮或背景区域时，关闭大图展示。

  • 实现：

    1. 在LargeImageViewer组件中添加关闭按钮，并绑定点击事件。
    2. 为<transition>组件添加@after-enter和@after-leave事件监听器。
    3. 在父组件中定义一个方法closeLargeImage，将isLargeImageVisible设置为false。
    4. 为大图背景添加点击事件，同样调用closeLargeImage方法。

9. 响应式设计

  • 目的：确保大图在不同设备上都能正常显示。

  • 实现：

    1. 使用CSS媒体查询来调整大图在不同屏幕尺寸下的大小。
    2. 在LargeImageViewer组件中使用百分比单位或vw单位来定义宽度和高度。

10. 优化性能

  • 目的：减少加载大图时的延迟，提高用户体验。

  • 实现：

    1. 使用懒加载技术，只有当用户滚动到小图附近时才加载大图。
    2. 对大图进行压缩处理，减小文件大小。

11. 错误处理

  • 目的：处理加载图片时可能出现的错误。

  • 实现：

    1. 为<img>标签添加onerror事件监听器。
    2. 当加载失败时，显示默认图片或错误提示。

使用示例 (MyComponent.vue)

  • 目的：在Vue组件中实现查看大图的功能。

  • 实现：

    1. 在Vue组件中导入LargeImageViewer组件。
    2. 使用<img>标签渲染小图，并绑定@click事件。
    3. 使用<transition>组件包裹LargeImageViewer组件。
    4. 在methods中定义showLargeImage和closeLargeImage方法。

代码实现

步骤1: 设计数据模型

目的: 在Vue组件中定义一个数据属性image，包含thumbnail和large两个字段。用于存储图片的相关信息。

实现:

// 定义组件的选项
<script>
export default {
  // 定义初始数据
  data() {
    return {
      // 存储图片数据的对象
      image: {
        // 小图的URL
        thumbnail: '',
        // 大图的URL
        large: ''
      },
      // 控制大图是否可见的状态
      isLargeImageVisible: false
    };
  }
};
</script>

步骤2: 获取图片数据

目的: 使用axios发起网络请求，获取包含图片信息的JSON数据，并将其存储到组件的数据属性中。

实现:

首先，安装axios:

npm install axios

然后，在App.vue中添加获取图片数据的逻辑：


// 引入axios模块
import axios from 'axios';

// 定义组件的选项
<script>
export default {
  // 定义初始数据
  data() {
    return {
      // 存储图片数据的对象
      image: {
        // 小图的URL
        thumbnail: '',
        // 大图的URL
        large: ''
      },
      // 控制大图是否可见的状态
      isLargeImageVisible: false
    };
  },
  // 在组件被创建后执行的方法
  created() {
    // 调用获取图片数据的方法
    this.fetchImageData();
  },
  // 定义组件的方法
  methods: {
    // 异步获取图片数据的方法
    async fetchImageData() {
      try {
        // 发起GET请求获取图片数据
        const response = await axios.get('https://api.example.com/images/1');
        // 更新image对象中的thumbnail和large字段
        this.image.thumbnail = response.data.thumbnailUrl;
        this.image.large = response.data.largeUrl;
      } catch (error) {
        // 捕获并打印错误信息
        console.error('Error fetching image data:', error);
      }
    }
  }
};
</script>

步骤3: 渲染小图

目的: 在页面上显示缩略图，并绑定点击事件。

实现:

<template>
  <!-- 定义根元素 -->
  <div id="app">
    <!-- 使用v-bind绑定图片源 -->
    <img :src="image.thumbnail" alt="Thumbnail" @click="showLargeImage" />
    <!-- 使用transition控制大图的淡入淡出效果 -->
    <transition name="fade">
      <!-- 使用v-if控制LargeImageViewer组件的显示 -->
      <LargeImageViewer v-if="isLargeImageVisible" :largeImageUrl="image.large" @close="closeLargeImage" />
    </transition>
  </div>
</template>

步骤4: 显示大图

目的: 定义一个方法showLargeImage，用于更新大图的显示状态。

实现:


export default {
  // ... 其他代码 ...
  // 定义组件的方法
  methods: {
    // ... 其他方法 ...
    // 展示大图的方法
    showLargeImage() {
      // 设置isLargeImageVisible为true以显示大图
      this.isLargeImageVisible = true;
    },
    // 关闭大图的方法
    closeLargeImage() {
      // 设置isLargeImageVisible为false以隐藏大图
      this.isLargeImageVisible = false;
    }
  }
};
</script>

步骤5: 实现大图展示逻辑

目的: 创建一个名为LargeImageViewer的Vue组件，用于展示大图。

实现:

  1. 组件模板:
   <template>

       <!-- 定义大图容器 -->
       <div class="large-image-viewer" @click="closeLargeImage">

          <!-- 使用v-bind绑定大图源 -->
          <img :src="largeImageUrl" alt="Large Image" @error="handleImageError" />

          <!-- 关闭按钮 -->
          <button @click.stop="closeLargeImage">关闭</button>
        </div>
   </template>

  1. 组件脚本:

    <script>
    // 导出组件
    export default {
      // 定义组件名
      name: 'LargeImageViewer',
      // 定义接收的属性
      props: {
        largeImageUrl: {
          // 类型为String
          type: String,
          // 必须提供
          required: true
        }
      },
      // 定义组件的方法
      methods: {
        // 关闭大图的方法
        closeLargeImage() {
          // 触发父组件的close事件
          this.$emit('close');
        },
        // 图片加载失败时的处理方法
        handleImageError() {
          // 替换图片源为默认图片
          this.$el.querySelector('img').src = 'default-image-url';
        }
      }
    };
</script>

  2. 组件样式:

   <!-- 定义组件的样式 -->
   <style scoped>
       .large-image-viewer {
         // 定位方式
         position: fixed;
         // 位置
         top: 0;
         left: 0;
         // 占满全屏
         width: 100%;
         height: 100%;
         // 居中对齐
         display: flex;
         justify-content: center;
         align-items: center;
         // 背景颜色
         background-color: rgba(0, 0, 0, 0.8);
       }

       .large-image-viewer img {
         // 最大宽度和高度限制
         max-width: 90%;
         max-height: 90%;
       }

       .large-image-viewer button {
         // 定位关闭按钮
         position: absolute;
         top: 10px;
         right: 10px;
         // 按钮样式
         background-color: #f44336;
         color: white;
         border: none;
         padding: 10px 20px;
         cursor: pointer;
       }
   </style>

步骤6: 添加过渡动画

目的: 使用Vue的<transition>组件包裹大图元素，添加淡入淡出的动画效果。

实现:


<!-- 定义根元素 -->
<template>
  <div id="app">
    <!-- ... 其他代码 ... -->
    <!-- 使用transition控制大图的淡入淡出效果 -->
    <transition name="fade">
      <!-- 使用v-if控制LargeImageViewer组件的显示 -->
      <LargeImageViewer v-if="isLargeImageVisible" :largeImageUrl="image.large" @close="closeLargeImage" />
    </transition>
  </div>
</template>

<!-- 定义过渡动画的样式 -->
<style>
.fade-enter-active,
.fade-leave-active {
  // 设置过渡动画
  transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  // 设置初始透明度
  opacity: 0;
}
</style>

步骤7: 关闭大图

目的: 在LargeImageViewer组件中添加关闭按钮，并绑定点击事件。

实现:

  1. 组件模板:
     <!-- 关闭按钮 -->
     <button @click.stop="closeLargeImage">关闭</button>
  1. 父组件方法:

在父组件中定义一个方法closeLargeImage，将isLargeImageVisible设置为false。


 // 关闭大图的方法
 closeLargeImage() {
 
     // 设置isLargeImageVisible为false以隐藏大图
     this.isLargeImageVisible = false;
 }

步骤8: 响应式设计

目的: 在LargeImageViewer组件中使用百分比单位或vw单位来定义宽度和高度。使大图在不同设备上都能适配屏幕尺寸。

实现:


.large-image-viewer img {
  // 最大宽度和高度限制
  max-width: 90%;
  max-height: 90%;
}

步骤9: 优化性能

目的: 使用懒加载技术，只有当用户滚动到小图附近时才加载大图。提高页面加载速度。

实现:

使用懒加载技术，只有当用户滚动到小图附近时才加载大图。

由于Vue 2没有内置的懒加载功能，我们可以使用第三方库如vue-lazyload来实现。

  1. 安装vue-lazyload:

       npm install vue-lazyload

  2. 在main.js 配置lazyload:

     // main.js
     import Vue from 'vue';
     import LazyLoad from 'vue-lazyload';

     // 配置懒加载插件
     Vue.use(LazyLoad, {
       loading: 'loading-image-url'
     });
  1. 在模板中使用lazyload: 
    <template>
  <!-- 使用v-lazy绑定大图源 -->
  <img v-lazy="image.large" alt="Large Image" />
</template>

步骤10: 错误处理

目的: 为<img>标签添加onerror事件监听器，处理图片加载失败的情况。

实现:


<!-- 使用v-bind绑定大图源 --> 
<img :src="largeImageUrl" alt="Large Image" @error="handleImageError" />

使用示例 (MyComponent.vue)

在Vue组件中导入LargeImageViewer组件，使用<img>标签渲染小图，并绑定@click事件。使用<transition>组件包裹LargeImageViewer组件，并在methods中定义showLargeImage和closeLargeImage方法。

1<template>
2  <div id="app">
3    <img :src="image.thumbnail" alt="Thumbnail" @click="showLargeImage" />
4    <transition name="fade">
5      <LargeImageViewer v-if="isLargeImageVisible" :largeImageUrl="image.large" @close="closeLargeImage" />
6    </transition>
7  </div>
8</template>
9
10<script>
11import LargeImageViewer from './components/LargeImageViewer.vue';
12
13export default {
14  components: {
15    LargeImageViewer
16  },
17  data() {
18    return {
19      image: {
20        thumbnail: '',
21        large: ''
22      },
23      isLargeImageVisible: false
24    };
25  },
26  created() {
27    this.fetchImageData();
28  },
29  methods: {
30    async fetchImageData() {
31      try {
32        const response = await axios.get('https://api.example.com/images/1');
33        this.image.thumbnail = response.data.thumbnailUrl;
34        this.image.large = response.data.largeUrl;
35      } catch (error) {
36        console.error('Error fetching image data:', error);
37      }
38    },
39    showLargeImage() {
40      this.isLargeImageVisible = true;
41    },
42    closeLargeImage() {
43      this.isLargeImageVisible = false;
44    }
45  }
46};
47</script>
48
49<style>
50/* Add fade-in and fade-out animations */
51.fade-enter-active,
52.fade-leave-active {
53  transition: opacity 0.5s;
54}
55
56.fade-enter-from,
57.fade-leave-to {
58  opacity: 0;
59}
60</style>

代码解释

1. 数据模型定义

  • image 对象:

    • thumbnail: 用于存储缩略图的URL。
    • large: 用于存储大图的URL。

  • isLargeImageVisible: 一个布尔值，用于控制大图是否可见。初始状态为false，即大图默认不可见。

2. 获取图片数据

  • 导入axios：用于发送HTTP请求。

  • created 钩子：组件创建后立即执行，用于初始化图片数据。

  • fetchImageData 方法：

    • 发送GET请求到https://api.example.com/images/1获取图片数据。
    • 将返回的缩略图和大图URL分别赋值给image.thumbnail和image.large。
    • 如果出现错误，在控制台输出错误信息。

3. 渲染小图

  • 缩略图：使用v-bind指令绑定图片源，并添加点击事件@click，触发showLargeImage方法。
  • 过渡动画：使用Vue提供的<transition>标签包裹大图组件，实现淡入淡出效果。
  • LargeImageViewer组件：当isLargeImageVisible为true时显示，通过:largeImageUrl传递大图URL，监听close事件，触发closeLargeImage方法。

4. 显示和关闭大图

  • showLargeImage 方法：点击缩略图时，将isLargeImageVisible设置为true，使大图可见。
  • closeLargeImage 方法：关闭大图时，将isLargeImageVisible设置为false，使大图不可见。

5. 大图展示逻辑

  • 组件模板：

    • div元素作为大图容器，点击背景时关闭大图。
    • img元素显示大图，添加@error事件处理图片加载失败。
    • button元素作为关闭按钮，点击时关闭大图。

  • 组件脚本：

    • 接收largeImageUrl作为prop。
    • 定义closeLargeImage方法，触发父组件的close事件。
    • 定义handleImageError方法，处理图片加载失败的情况。

6. 过渡动画

  • 使用Vue的<transition>组件，为LargeImageViewer组件添加淡入淡出效果。
  • name属性指定过渡类名前缀，这里为fade。

7. 响应式设计

  • 确保大图在不同设备上都能适应屏幕尺寸，通过CSS媒体查询来实现。

8. 性能优化：懒加载

  • 安装并配置vue-lazyload插件来延迟加载大图，提高页面加载速度。

  • 使用懒加载指令v-lazy来绑定大图的URL。

      <img v-lazy="image.large" alt="Large Image" />

9. 错误处理

  • 当大图加载失败时触发handleImageError方法。
  • handleImageError方法将图片源替换为默认图片。
avatar
文章
阅读
粉丝