可以在離開頁面時使用 ImageViewer.clear()
import { ImageViewer } from 'antd-mobile'
useEffect(() => {
return () => {
ImageViewer.clear()
};
}, []);
如果需要在瀏覽器后退事件時關(guān)閉預(yù)覽窗口，需要監(jiān)聽瀏覽器返回事件
// 自定義后退處理函數(shù)
const closePreviewImg = () => {
ImageViewer.clear(); // 關(guān)閉圖片預(yù)覽
}
const onPreview = (index: number) => {
// 顯示預(yù)覽窗口時奔害，監(jiān)聽瀏覽器返回按鈕
history.pushState(null, null, document.URL); // 先在瀏覽器history中插入一個記錄楷兽，可以阻止一次瀏覽器默認的返回事件
window.addEventListener("popstate", closePreviewImg, false); // 監(jiān)聽后退事件
// 獲取dom，監(jiān)聽預(yù)覽窗口關(guān)閉事件
const maskDom = document.getElementsByClassName('adm-mask');
maskDom[maskDom.length - 1].addEventListener("click", function () {
// 點擊mask,關(guān)閉圖片預(yù)覽彈窗時华临，取消對瀏覽器返回按鈕的監(jiān)聽
history.back(); // 因為手動關(guān)閉了芯杀，所以把上方history中插入的記錄消費掉
window.removeEventListener('popstate', closePreviewImg, false); // 取消監(jiān)聽
}, { once: true }); // 只觸發(fā)一次，下次預(yù)覽還會再綁定银舱，否則點擊過快瘪匿，mask消失動畫中點擊會觸發(fā)2次后退
}
{/* 監(jiān)聽預(yù)覽圖片事件 */}
<ImageUploader onPreview={onPreview}>
