Vue入门攻略：轻松实现图片展示功能，告别图片加载烦恼！

一、Vue简介

二、图片展示组件

1. Element UI的el-image-viewer：这是一个功能强大的图片查看器组件，支持缩放、拖拽、多图浏览等功能。
2. Vue的v-lazy：这是一个用于图片懒加载的指令，可以提高页面加载速度，提升用户体验。
3. medium-zoom：这是一个JavaScript库，可以与Vue集成，实现图片的缩放效果。

三、el-image-viewer组件使用

以下是使用Element UI的el-image-viewer组件的示例代码：

<template>
  <div>
    <el-button @click="onPreview">预览</el-button>
    <el-image-viewer
      v-if="showViewer"
      :url-list="imageUrlList"
      @close="showViewer = false"
    ></el-image-viewer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showViewer: false,
      imageUrlList: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg',
      ],
    };
  },
  methods: {
    onPreview() {
      this.showViewer = true;
    },
  },
};
</script>

四、v-lazy指令使用

<template>
  <div>
    <ul class="img-list">
      <li v-for="(item, index) in imgList" :key="index">
        <img v-lazy="item" alt="" style="width: 768px;">
      </li>
    </ul>
  </div>
</template>

<script>
import VueLazyload from 'vue-lazyload';

export default {
  data() {
    return {
      imgList: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg',
      ],
    };
  },
  created() {
    Vue.use(VueLazyload);
  },
};
</script>

五、medium-zoom集成

<template>
  <div>
    <img
      v-for="(item, index) in imageUrlList"
      :key="index"
      :src="item"
      @click="zoomImage(item)"
    />
  </div>
</template>

<script>
import mediumZoom from 'medium-zoom';

export default {
  data() {
    return {
      imageUrlList: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg',
      ],
    };
  },
  mounted() {
    mediumZoom(this.$el);
  },
  methods: {
    zoomImage(imageUrl) {
      this.$el.style.backgroundImage = `url(${imageUrl})`;
      this.$el.style.backgroundSize = 'cover';
    },
  },
};
</script>

六、总结