uniapp 自定义模态框显示图片

UniApp 的自定义模态框（Modal）如果需要展示图片，你可以通过 Vue 的组件化思想来创建一个图片轮播或者静态显示的组件。以下是一个简单的步骤：

1. 首先，在项目中新建一个 Vue 组件，比如 `CustomImageModal.vue`。

<template>
  <view class="custom-modal">
    <image :src="currentImageUrl" @load="onLoad" />
    <button slot="footer" @click="close">关闭</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentImageUrl: '',
      images: ['url1', 'url2', 'url3'], // 图片数组
    };
  },
  methods: {
    onLoad(e) {
      // 图片加载完成后的处理，如调整大小等
    },
    openModal(imageIndex) {
      this.currentImageUrl = this.images[imageIndex];
      // 显示模态框
    },
    closeModal() {
      // 关闭模态框
    },
  },
};
</script>

<style scoped>
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.image-container {
  max-width: 80%;
  max-height: 80%;
}
</style>

2. 在调用的地方，你可以这样打开模态并传递图片索引：

this.$refs.customImageModal.openModal(index); // index 为你想显示的图片索引

// 当你想关闭时
this.$refs.customImageModal.closeModal();

这里假设你已经在 App.vue 或者其他地方引用了这个 CustomImageModal 组件，并且给它添加了 ref 属性 (`ref="customImageModal"`).