希望开放 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);
};

[liuheo]

+1

[liuheo]

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

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呢

[liuheo]

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

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";

[iamartinlong]

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

[liuheo]

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