vue uniapp 自定义图片预览，实现 uni.previewImage() API 功能

<template>
  <view class="container">
    <image
      class="preview-image"
      v-for="(src, index) in imageUrlList"
      :key="index"
      :src="src"
      @click="previewImage(index)"
    />
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      imageUrlList: [
        'http://example.com/image1.jpg',
        'http://example.com/image2.jpg',
        'http://example.com/image3.jpg'
      ]
    };
  },
  methods: {
    previewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.imageUrlList
      });
    }
  }
};
</script>
 
<style>
.preview-image {
  width: 100px;
  height: 100px;
  margin: 10px;
  object-fit: cover;
}
</style>

这段代码定义了一个Vue组件，其中包含一个图片列表。每个图片都有点击事件，点击后会调用previewImage方法，该方法使用uni.previewImage API 实现图片预览功能。图片预览时，可以通过点击左右箭头在图片间切换，上下滑动关闭预览。