用户离开页面提示

image.png

image.png

image.png

编辑页面常见的离开提示，是如何实现的？

情况一 在内部跳转

umi 基于react-router提供了相关API

image.png

可以自己做一些扩展，优化提示框，优化提示逻辑。

              <Prompt
                    when={isPrompt}
                    message={(location) => {
                        if(location.pathname=='/login'){
                            setIsPrompt(false);
                            //保存草稿
                            _handleSubmit('draft');
                            setTimeout(()=>{
                                router.push(location);
                            },1000);
                        }else{
                            Modal.confirm({
                                title: '提示',
                                content: '汇报暂未提交，确定离开页面吗？',
                                okText: '确认',
                                cancelText: '取消',
                                onOk: () => {
                                    setIsPrompt(false);
                                    //保存草稿
                                    _handleSubmit('draft');
                                    setTimeout(()=>{
                                        router.push(location);
                                    },100);
                                }
                            });
                        }
                        return false;
                    }}
                />

情况二 刷新页面，或者关闭页面

无法自定义，只能显示浏览器定义好的对话框。
监听beforeunload事件

 window.onbeforeunload = function(){
    return "必您确定要退出页面吗？";
  }

文字不一定会生效，浏览器有自己默认的提示。