vue写的h5怎么实现点击图片实现放大占满怎么屏幕，就是预览的意思？

Question

有做过这个需求的说下看下，谢谢大佬们

Answer 1

使用antd的image组件

<Image
width={200}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
  />

鼠标悬浮效果

全屏效果

Answer 2

1. 获取屏幕或者视口宽高（100vh,100vw）
2. 一个适应宽高的算法，可以参考前端压缩图片里面的toCanvas方法。
3. 一个v-show占满全屏的容器。
4. 监听图片点击方法，显示全屏容器，容器中动态添加图片地址。

Answer 3

点击获取图片 url，然后创建一个铺满屏幕的 dialog 弹窗，把图片宽高都设为 100% 就好了，
简单的可以看这个链接里面的照片墙组件，点击查看图标之后的思路。

需求伪代码

<template>
  <div class="clearfix">
    <a-upload
      ...
      @preview="handlePreview"
    >
      //...
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
export default {
  // ...
  methods: {
     handlePreview(file) {
      //....
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
  },
};
</script>