美文网首页react umi dva antd大前端
antd的ImageUploader组件预览图片时,切换路由预览

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

作者: jack钱 | 来源:发表于2022-01-11 15:44 被阅读0次

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

    相关文章

      网友评论

        本文标题:antd的ImageUploader组件预览图片时,切换路由预览

        本文链接:https://www.haomeiwen.com/subject/vcnbcrtx.html