可以在离开页面时使用 ImageViewer.clear()
import { ImageViewer } from 'antd-mobile'
useEffect(() => {
return () => {
ImageViewer.clear()
};
}, []);
如果需要在浏览器后退事件时关闭预览窗口,需要监听浏览器返回事件
// 自定义后退处理函数
const closePreviewImg = () => {
ImageViewer.clear(); // 关闭图片预览
}
const onPreview = (index: number) => {
// 显示预览窗口时,监听浏览器返回按钮
history.pushState(null, null, document.URL); // 先在浏览器history中插入一个记录,可以阻止一次浏览器默认的返回事件
window.addEventListener("popstate", closePreviewImg, false); // 监听后退事件
// 获取dom,监听预览窗口关闭事件
const maskDom = document.getElementsByClassName('adm-mask');
maskDom[maskDom.length - 1].addEventListener("click", function () {
// 点击mask,关闭图片预览弹窗时,取消对浏览器返回按钮的监听
history.back(); // 因为手动关闭了,所以把上方history中插入的记录消费掉
window.removeEventListener('popstate', closePreviewImg, false); // 取消监听
}, { once: true }); // 只触发一次,下次预览还会再绑定,否则点击过快,mask消失动画中点击会触发2次后退
}
{/* 监听预览图片事件 */}
<ImageUploader onPreview={onPreview}>
网友评论