图片预览

图片预览使用了 MUI 的 mui.previewImage() 方法实现。

警告⚠️

1.作者并未单独封装相关样式文件和JS模块文件，需要自行参照示例代码实现。

2.演示源代码用 VUE 处理动态效果。如需搬用代码，可自行适配调整。

示例代码

<div class="content">
  <ul class="lists">
    <li class="list">
      <div class="imgs">
        <span class="img">
          <img src="/static/img/auilogo.png" alt="" data-preview-src="" data-preview-group="1">
        </span>
      </div>
    </li>
    <li class="list">
      <div class="imgs">
        <span class="img">
          <img src="/static/img/auilogo.png" alt="" data-preview-src="" data-preview-group="1">
        </span>
      </div>
    </li>
    <li class="list">
      <div class="imgs">
        <span class="img">
          <img src="/static/img/auilogo.png" alt="" data-preview-src="" data-preview-group="1">
        </span>
      </div>
    </li>
  </ul>
</div>
<script>
<script src="lib/mui/mui.min.js"></script>
<script src="lib/mui/mui.zoom.js"></script>
<script src="lib/mui/mui.previewimage.js"></script>
  mui.previewImage();
</script>