Vant ImagePreview 图片预览组件使用教程

以下是使用 Vant 组件库中的 ImagePreview 组件对图片进行预览的代码示例：

首先，安装 Vant 组件库：

npm install vant

在需要使用 ImagePreview 的页面中，引入 Vant 组件库和相关样式：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

在页面中使用 ImagePreview 组件：

<template>
  <div>
    <img :src='imageUrl' @click='previewImage' />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg', // 图片的URL地址
    };
  },
  methods: {
    previewImage() {
      this.$vant.ImagePreview([{ url: this.imageUrl }]);
    },
  },
};
</script>

在上述代码中，我们首先在 data 中定义了一个 imageUrl 变量，用于存储图片的 URL 地址。然后，在页面中使用 img 标签展示图片，并绑定了点击事件。当图片被点击时，调用 this.$vant.ImagePreview 方法来预览图片。注意，需要传入一个包含 url 属性的对象数组作为参数，其中 url 属性的值为图片的 URL 地址。

这样，当用户点击图片时，就会弹出一个包含预览图片的弹窗。用户可以在弹窗中进行缩放、滑动等操作，以便更好地查看图片。