前端实现图片预览效果简介本文是阅读antd的Image组件，学习antd是怎么实现图片预览的 1、源码解析 antd

简介

本文是阅读antd的Image组件，学习antd是怎么实现图片预览的

1、源码解析

antd 中的Image组件是基于RcImage组件封装的，要看全貌，我们只能去阅读RcImage组件了

我们先看看rcImage组件的结构，分为image和preview两个部分，点击图片部分，会触发onClick点击事件

看到这里了我们再看看预览的组件Preview，Preview也是2部分，一部分是上面的图片模态框，一部分是下面的操作栏

Dialog组件是这里的核心，同时Dialog也是蚂蚁封装好的一个库。大概就是给一个position:absolute的布局，给一个深色，然后给0.6的透明度。点击的时候给这个元素display:block,关闭的时候把display:none。

我用原生的js实现了一下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img{
      width: 300px;
      height: 300px;
    }
    .img2{
      width: 300px;
      height: 300px;
      margin: 200px;
    }
    .preview{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: none;
      translate: (50%,-50%);
      background-color: rgba(0, 0, 0, 0.88);
    }
  </style>
</head>
<body>
  <div onclick="show()">
    <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" class="img"/>
  </div>

  <div id="preview" onclick="hid()" class="preview">
    <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" class="img2"/>
  </div>
</body>
</html>
<script>
  function show(){
    const pre = document.getElementById('preview')
    pre.style.display = 'block'
  }

  function hid(){
    const pre = document.getElementById('preview')
    pre.style.display = 'none'
  }
</script>

仔细看了这块源码后，发现大佬们写的组件和我们平时写的差距不是太大