图片查看器

<div class="xxd-cluster" id="viewer-demo">
  <button class="xxd-btn" data-i="0">打开第 1 张</button><button class="xxd-btn" data-i="2">打开第 3 张</button>
</div>
<script>
  const pics = ["#d65f32", "#3b74b8", "#5a8a3c", "#7b61b0"].map((c, i) => ({ src: `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='800' height='560'><rect width='800' height='560' fill='${c}'/><text x='400' y='300' font-size='64' fill='white' text-anchor='middle' font-family='sans-serif'>${i + 1}</text></svg>`)}`, alt: `第 ${i + 1} 张` }));
  document.getElementById("viewer-demo").addEventListener("click", (e) => {
    const b = e.target.closest("[data-i]");
    if (b) Xxd.openViewer(pics, Number(b.dataset.i), { actions: [{ label: "复制图片", run: () => Xxd.toast("已复制图片", { tone: "success" }) }, { label: "下载", run: () => Xxd.toast("开始下载") }] });
  });
</script>