不想当Window的Dialog不是一个好Modal，弹窗翻身记

news/2024/4/26 15:52:51/文章来源:https://www.cnblogs.com/hiisea/p/16638875.html

弹窗是我们熟视无睹的一种交互方式，经常用到，但从没好好想过这种交互行为背后的意义...

弹窗是Windows的灵魂

Windows的灵魂是什么？当然是Window，当方便快捷的多窗口进入人们视野的时候，大家无不为之惊呼太好用了！！

弹窗其实是一种多线程

当你需要保持当前任务运行，同时开启一个新任务时，就需要多线程。弹窗何尝不是一种交互领域的多线程？它可以挂起当前的操作流，然后开辟一片全新的操作区域，让用户重新开始一条新的操作流，并且等待其完成后还可以重新返回之前的操作环境。

弹窗其实就是Page

有的UI设计师讨厌弹窗，觉得不美观，我不知道为什么？当你把一个弹窗放到最大，充满整个视口，你会发现这不就是一个所谓的Page吗？

弹窗是一种keep-alive

为了保持当前的滚动位置，用户的操作环境等，最简单的办法就是使用弹窗，不销毁底下的Dom元素，这不就是keep-alive吗？

弹窗与Window

Window？Dialog？Modal？傻傻分不清楚，我也分不清楚，但我们也不用去杠，就是一个命名而已。我们可以约定，Window特指那些重量级的弹窗，而Dialog和Modal特指轻量级弹窗。

我们借用浏览器的Tab窗口来看：

  • Window里面装的是独立的Page，而Dialog里面装的是一个独立的Fragment;
  • Window里面不仅Dom元素是独立的，运行环境也是独立的，而Dialog只是Dom元素独立；
  • Window拥有独立的历史记录栈，可以前进/后退/刷新，而Dialog没有这些功能；

没有Window的SPA是不完整的

我们习惯用Single-Page-Application来模拟浏览器的多页，从而可以更自由的控制页面间的跳转体验，但一直缺乏一种对Window窗口的模拟。在多页中我们可以一句话让一个页面在新窗口中打开，比如：<a href="xxx" target="_blank">或者window.open(xxx)，然而在SPA中即便是操作一个Dialog都是相对麻烦的事情，况且Dialog也不能算是Window。

实现虚拟Window

基于以上分析，个人实现了一个基本能满足需求的虚拟Window。

先看看效果：虚拟Window

之所以说它是虚拟Window，而非Dialog，理由如下：

  • 🚀 它里面装的是独立的Page而非Fragment，仅根据Url就可以重建弹窗，例如http://admin-react-antd.eluxjs.com/admin/member/item/edit/50?__c=_dialog
  • 🚀 它里面装的Page，不仅有独立的Dom结构，还有独立的全局Store，类似于实现与外界隔离的运行环境。
  • 🚀 它自带独立的历史记录栈，基于它的每一个路由跳转都将自动形成一条历史记录。
  • 🚀 它提供类似浏览器窗口的工具条：关闭/后退/刷新。如：文章列表 => 点击标题 => 点击作者 => 点击文章数。然后你可以依次回退每一步操作，也可一次性全部关闭。
  • 🚀 它提供窗口最大化、最小化按钮，如：文章详情，窗口左上角按钮；并支持默认最大化，如：创建文章
    elux虚拟窗口
  • 🚀 只需一句话即可打开新窗口，例如
    • <Link to="/article/list/index" action="push" target="window">：新窗口打开
    • <Link to="/article/list/index" action="push" target="page">：本窗口打开
  • 🚀 Window中可以再开新窗口，最多可达10级，自动维护层级关系。
  • 🚀 弹窗再弹弹窗体验不好？多层弹窗时自动隐藏下层弹窗，关闭上层弹窗自动恢复下层弹窗，保证每一时刻始终之会出现一层弹窗。
  • 🚀 轻松实现是否keep-alive。keep-alive优点是用户体验好，缺点是太TM占资源（需要缓存所有Dom元素还有相关内存变量），现在使用虚拟Windw，你想keep-alive你就在新窗口中打开，不想keep-alive就在原窗口中打开，随意控制。

项目地址

虚拟Window也算是摸着石头过河，大家有什么意见、想法、改进思路，都欢迎提供哦...

最后附上项目地址:

  • React版本
    • github: https://github.com/hiisea/elux-react-antd-admin
    • gitee: https://gitee.com/hiisea/elux-react-antd-admin-fork
  • Vue版本
    • github: https://github.com/hiisea/elux-vue-antd-admin
    • gitee: https://gitee.com/hiisea/elux-vue-antd-admin-fork

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_2979.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

工具 -- git 汉化

工具 -- git 汉化

说明 来源转载 https://blog.csdn.net/mansir123/article/details/121692125Git GUI汉化包来源 https://github.com/stayor/git-gui-zh转载 https://www.cnblogs.com/chenghu/articles/12678500.html1、git bash 汉化 这个Git bash本身就支持中文，只需要在打开Git bash后命令窗…
阅读更多...
好多不懂的和bug

好多不懂的和bug

1、知道了MD5， 2、知道了validate是干什么的，（validate中的rules中编写验证规则，规范输入），可以在管理员在网站修改数据的时候对输入进行限制。1 <script type="text/javascript">2 $(function(){3 $("#addForm").validate({4 rul…
阅读更多...
DevTools 无法加载来源映射：无法加载 webpack net::ERR_UNKNOWN_URL_SCHEME

DevTools 无法加载来源映射：无法加载 webpack net::ERR_UNKNOWN_URL_SCHEME

问题：DevTools 无法加载来源映射：无法加载 webpack:///node_modules/element-plus/es/components/notification/src/notification.mjs.map 的内容：Fetch through target failed: Unsupported URL scheme; Fallback: HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME 当…
阅读更多...
JAVA进阶--static、工具类、单例、继承--2022年8月28日

JAVA进阶--static、工具类、单例、继承--2022年8月28日

第一节 static静态关键字1、成员变量的分类和访问分别是什么样的？静态成员变量（有static修饰，属于类，加载一次，可以被共享访问）访问格式：类名.变量名（推荐）对象名.变量名(不推荐）实例成员变量（无static修饰，属于对象）访问格式：对象名.变量名2、两种成员变量各自…
阅读更多...
QA特辑 | 看了这场直播，我找到了设备指纹“从不说谎”的原因

QA特辑 | 看了这场直播，我找到了设备指纹“从不说谎”的原因

除了身份证外，设备指纹可能是唯一一个可以证明你是谁的方法。 究其原因，就在于设备指纹的唯一性和稳定性。 8月 25 日下午 15 点，顶象技术总监杜威就设备指纹的唯一性和稳定性的核心算法展开分享。直播过程中，我们也收到了一系列关于设备指纹唯一性稳定性核心算法的疑问，现…
阅读更多...
YBTOJ [树状数组] 二进制

YBTOJ [树状数组] 二进制

哇咔咔，此乃真好题！这种东西当然要抢个榜首辣qaq。 Solution 首先不带 \(+x\) 的做法，相信大家都会，维护一下全局二进制每一位 \(1\) 的个数，把 \(y\) 二进制拆分一下，就知道答案了。 这个 \(+x\) 真滴很恶心啊！ 考虑这样一个事实，非常滴实用： 对于一个 \(x\) \(and\)…
阅读更多...
科普达人丨一图看懂安全组

科普达人丨一图看懂安全组

建议收藏安全组是一种虚拟防火墙，通过安全组规则控制 ECS 实例出/入方向的流量，保障云服务器的安全。本文将通过介绍安全组的工作原理、功能、默认安全组和规则，以及快速上手使用安全组的操作等方面的介绍，您对于安全组有一个全面的了解，帮助您更好、更安全地开展业务上云…
阅读更多...
京东云PostgreSQL在GIS场景的应用分享

京东云PostgreSQL在GIS场景的应用分享

在地图或地理信息有关的场景里，地址关键词的检索尤其重要。比如打开百度地图，想要查询某个位置的信息“北京市海淀区清华东路17号中国农业大学”，往往我们输入的是关键词“中国农业大学”而不是精确到街道的详细地址信息。在地图或地理信息有关的场景里，地址关键词的检索尤…
阅读更多...
超全的正则表达式速查手册

超全的正则表达式速查手册

一、校验数字的表达式 数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$ 零和非零开头的数字：^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$ 正…
阅读更多...
HCIA学习笔记二十六：手工负载分担模式二层链路聚合

HCIA学习笔记二十六：手工负载分担模式二层链路聚合

一、链路聚合的应用场景• 链路聚合一般部署在核心结点，以便提升整个网络的数据吞吐量。 二、链路聚合• 链路聚合能够提高链路带宽，增强网络可用性，支持负载分担。 三、链路聚合模式• 手工负载分担模式下所有活动接口都参与数据的转发，分担负载流量。 • LACP模式支持链路…
阅读更多...
Kotlin的空检查

Kotlin的空检查

我们在使用Java语言时，经常会出现空指针异常NullPointerException。Kotlin基于过往语言设计的经验对这一问题进行了改良，把运行时可能出现的null问题，以编译时错误的方式，提前在编译期强迫我们重视起来，而不是等到运行时报错，防患于未然，提高我们程序的健壮性。 Kotlin语…
阅读更多...
智慧城市建设的三个阶段

智慧城市建设的三个阶段

今天的中国城市，正在疾步向前拥抱智慧时代，我国是全球智慧城市建设最为积极的国家之一。近年来，随着政策红利进一步释放与资金的大量投入，智慧城市产业也将迎来新的发展高潮。智慧城市建设步入快车道时代！据不完全统计，中国智慧城市的发展数量已经超过500个，居世界之最。…
阅读更多...
2021年 西南石油大学超算与并行计算团队南充校区分队 第二届招新赛题解

2021年 西南石油大学超算与并行计算团队南充校区分队 第二届招新赛题解

2021年SWPU(南充)超算团队招新赛总体难度并不是很大，大部分题目考察的是基本的编程能力，题目中涉及到了一些并行计算相关的名词和知识，选手在参加比赛的同时，既能够展示自己的实力，也可以学习到相关的一些知识。下面是本次招新赛的题目A.简单输出 题目描述：题目要求：输出…
阅读更多...
Java并发编程总结

Java并发编程总结

——《Java多线程编程实战指南》学习及其他参考博客总结 串行、并行、并发 (1)串行：顺序执行多个任务，一个时刻只有一个任务在执行 (2)并行：多个CPU（核）同一时间多个任务，一个时刻有多个任务在执行 (3)并发：单个CPU（核）同一时间间隔内交替执行多个任务，一个时刻只有一…
阅读更多...
学习随笔——洛谷题目P1636解答

学习随笔——洛谷题目P1636解答

摘要：欧拉图的应用。 题目原地址如下：https://www.luogu.com.cn/problem/P1636 题目截图如下： 一笔画问题，考察欧拉回路的定义，即所有节点的入度出度的和都为偶数即可满足欧拉回路的性质。我们为方便分析可加入一条线，发现加入一条边后会改变两个点的度数和，只需寻找奇数…
阅读更多...
Spring的自动化装配

Spring的自动化装配

在Spring中，对象无需自己查找和创建与其所关联的其他对象。相反，容易负责把需要相互协作的对象引用赋予各个对象。例如，一个订单管理的组件需要信用卡认证组件，但它不需要自己创建信用卡认证组件。订单管理组件只需要表明自己两手空空，容器就会主动赋予它一个信用卡认证组…
阅读更多...
jQuery使用ajax

jQuery使用ajax

1.导入jQuery的js库2.jQuery发送单一的get请求$.get(url:接口地址,data:{id:1,name:2,......}function(res){// res是服务器返回的数据} ) 3.jQuery发送单一的post请求$.post(url:接口地址,data:{id:1,name:哈哈哈,......}function(res){// res是服务器返回的数据} ) 4.jQuery发…
阅读更多...
服务器TIME_WAIT和CLOSE_WAIT详解和解决办法

服务器TIME_WAIT和CLOSE_WAIT详解和解决办法

服务器TIME_WAIT和CLOSE_WAIT详解和解决办法 - 悟寰轩-叶秋 - 博客园 https://www.cnblogs.com/sunxucool/p/3449068.html 昨天解决了一个HttpClient调用错误导致的服务器异常，具体过程如下： http://blog.csdn.net/shootyou/article/details/6615051 里头的分析过程有提到，…
阅读更多...
引入VUE的方式（8种）

引入VUE的方式（8种）

第一类： 1、本地引入 把vue的js文件下载下来引入 2、CDN引入 把vue.js网址引入 3、把vue.js文件放在项目文件夹src中引入项目 然后webpack打包4、编辑器直接生成cdn的方式第二类： 5、自己构建vue的脚手架/* 1.新建项目 alipay 2.初始化配置文件:npm init -y 3.下载依赖:npm…
阅读更多...
PipeCAD-捕捉选项

PipeCAD-捕捉选项

PipeCAD-捕捉选项PipeCAD-捕捉选项 eryar@163.com Key Words. PipeCAD, 三维管道设计软件，三维工厂设计软件，三维配管软件 1 概述 在PipeCAD交互设计过程中，有些建模操作需要在模型中捕捉点来进行定位。通过捕捉点可以快速、准确建模。一般的CAD软件中都有捕捉功能，为了给用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业