vue中查看大图的组件

在Vue.js中，要创建一个用于显示大图的组件，通常会使用`v-bind`指令配合图片懒加载库如vue-lazyload，或者直接使用`img`标签并设置`src`属性为占位符或者默认小图，当用户需要查看大图时再动态切换至高清版本。以下是一个简单的Vue组件示例：

<template>
  <div class="image-container">
    <img :src="lazyImageSrc" v-if="!isLoaded" alt="默认小图" />
    <img :src="largeImageSrc" v-if="isLoaded" @click="toggleLargeImage" alt="大图" />
    <div class="loader" v-if="isLoading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lazyImageSrc: 'default-image-url', // 小图路径
      largeImageSrc: null, // 大图路径，初始为空
      isLoaded: false,
      isLoading: true,
    };
  },
  methods: {
    toggleLargeImage() {
      this.largeImageSrc = this.lazyImageSrc;
      this.isLoaded = !this.isLoaded; // 切换状态，如果已加载就隐藏，反之则显示
      this.isLoading = true; // 设置为加载中状态
      // 这里可以添加异步加载大图的逻辑，例如使用axios或Intersection Observer API
      setTimeout(() => {
        this.isLoading = false;
      }, 1000); // 模拟1秒后加载完成
    },
  },
};
</script>

<style scoped>
.image-container {
  position: relative;
}
.loader {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>