希望开放 ImagePreview 这个组件,如果能实现 showImagePreview是最好

[szhai1969]

问题的清晰而简明的描述

showImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg']);

1.比如列表,需要显示图片数量,但是不需要显示图片,查看的情况,点击预览可用图片列表, 2.图片原始比较大,但是又不提供,缩略图,如果按默认显示图片就很占用带宽,这种提供点击图片预览

建议的解决方案

https://vant-contrib.gitee.io/vant/#/zh-CN/image-preview 类型这个功能

备选方案

No response

附加上下文

No response

验证

• [X] 阅读 贡献指南。
• [X] 阅读 文档。
• [X] 检查是否已经存在请求相同功能的问题，以避免创建重复的问题。

[JasonYadi]

支持放开。为了支持这个效果只能用特殊方法来支持了

export const previewImage = (list: string[], previewIndex: number) => {
    if (!list.length) return;
    const e = document.createEvent('MouseEvents');
    e.initEvent('click', true, true);
    const imgList = list.map(src => {
        return h(NImage, { width: 100, src });
    });
    let existDiv = document.querySelector('#preview-image');
    if (!existDiv) {
        const div = document.createElement('div');
        div.id = 'preview-image';
        document.body.appendChild(div);
        existDiv = div;
    }
    if (imgList.length > 1) {
        render(h(NImageGroup, {}, [h(NSpace, {}, imgList)]), existDiv);
    } else {
        render(imgList[0], existDiv);
    }
    existDiv?.querySelectorAll('.n-image img')[previewIndex]?.dispatchEvent(e);
};

[itliujia]

+1

[itliujia]

支持放开。为了支持这个效果只能用特殊方法来支持了

export const previewImage = (list: string[], previewIndex: number) => {
  if (!list.length) return;
  const e = document.createEvent('MouseEvents');
  e.initEvent('click', true, true);
  const imgList = list.map(src => {
      return h(NImage, { width: 100, src });
  });
  let existDiv = document.querySelector('#preview-image');
  if (!existDiv) {
      const div = document.createElement('div');
      div.id = 'preview-image';
      document.body.appendChild(div);
      existDiv = div;
  }
  if (imgList.length > 1) {
      render(h(NImageGroup, {}, [h(NSpace, {}, imgList)]), existDiv);
  } else {
      render(imgList[0], existDiv);
  }
  existDiv?.querySelectorAll('.n-image img')[previewIndex]?.dispatchEvent(e);
};

大佬，这个怎么在关闭预览时去掉'preview-image'这个div呢

[itliujia]

支持放开。为了支持这个效果只能用特殊方法来支持了

export const previewImage = (list: string[], previewIndex: number) => {
    if (!list.length) return;
    const e = document.createEvent('MouseEvents');
    e.initEvent('click', true, true);
    const imgList = list.map(src => {
        return h(NImage, { width: 100, src });
    });
    let existDiv = document.querySelector('#preview-image');
    if (!existDiv) {
        const div = document.createElement('div');
        div.id = 'preview-image';
        document.body.appendChild(div);
        existDiv = div;
    }
    if (imgList.length > 1) {
        render(h(NImageGroup, {}, [h(NSpace, {}, imgList)]), existDiv);
    } else {
        render(imgList[0], existDiv);
    }
    existDiv?.querySelectorAll('.n-image img')[previewIndex]?.dispatchEvent(e);
};

大佬，这个怎么在关闭预览时去掉'preview-image'这个div呢

我知道啦，div.style.display = "none";

[chatty-go]

可以增加一个previewImage组件，动态切换要预览的url即可。

[itliujia]

你好，我最近正在学习中，无法亲自回复你的邮件。我将尽快给你回复。