img 和pdf 文件上传完毕后的预览

最近实现的功能使 pdf 和 img 在未下载的情况下，能够直接进行预览~没有提供ui

我的想法是这样的~

 组长看完说 这样太繁琐了，做个蒙层吧，也就是这样的

不得不说比我的想到的确实好看的不止一点点啊 

下边是代码展示啦 ----- 如果是pdf 就在新页面打卡，如果是img 就弹窗显示，这个不重要 重要的是遮罩层的样式代码

 {item.file_type === 'picture' && (
                        <div
                          className={styles.folderMasking}
                          onClick={() => previewImg(item.file_name, item.file_url)}
                        />
                      )}
                      {item.file_type === 'pdf' && (
                        <a
                          target="_blank"
                          href={`https://${ServerConfig.uploadBucketName}.s3.${ServerConfig.uploadRegion}.amazonaws.com/${item.file_url}`}
                        >
                          <div className={styles.folderPdfMasking}></div>
                        </a>
                      )}

遮罩层的样式代码段

    .folderMasking,
        .folderPdfMasking {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 3;  //  一定要注意层级的展示
          display: none;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.25) url(../../assets/images/library/preview.svg) no-repeat 50%
            35%;
          background-size: 25px 20px;
        }


//  父级元素 hover 时 展示遮罩层



 .folderContent:hover {
      box-shadow: 0px 4px 4px 0px rgba(200, 200, 200, 0.5);

      .folderMasking,
      .folderPdfMasking {
        display: block;
      }
 }

ok啦 这就是这个遮罩层的展示