react umi dva antd大前端

antd的ImageUploader组件预览图片时,切换路由预览

2022-01-11  本文已影响0人  jack钱

可以在离开页面时使用 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}>
上一篇 下一篇

猜你喜欢

热点阅读