next
next copied to clipboard
[Dialog]dialog & overlay 关闭事件
Component
Dialog
Feature Description
dialog addKeyDownEventOnWrapper 增加属性,增加 keydown 事件在 wrapper 上 overlayt 增加 addKeyDownEventOnWrapper,增加 keydown 事件在 wrapper 上,增加 closeByOutSideClickEvents,配置点击关闭事件,之前写死的 click
以上修改都是在集团 lowcode-engine 里修复问题时发现的修复项,lowcode-engine 也在 document.body 上监听了 keydown 事件,如果 dialog/overlay 也在 document.body 上监听 esc 将无法拦截 esc 事件。
没看懂,是 Dialog 的esc 影响了低代码引擎吗?
没看懂,是 Dialog 的esc 影响了低代码引擎吗?
不是。是 dialog 拦截不了 keydown(esc 关闭的功能),因为 lowcode-engine 先在 body 上监听了 keydown,所以一定先触发。 如果 dialog 的 esc 在 wrapper 上监听,会先冒泡执行,然后拦截掉 lowcode-engine 就不会执行 esc-handle
pr 在这里 #4099, @bindoon 可以一起看下
@wukidy 你是什么场景呀?是 Dialog 在低代码引擎里面渲染出来了,还是在引擎外面使用影响到了引擎的 keydown 事件呢?
是只期望Dialog弹窗关闭,不期望引擎被响应?
@wukidy 你是什么场景呀?是 Dialog 在低代码引擎里面渲染出来了,还是在引擎外面使用影响到了引擎的 keydown 事件呢?
是只期望Dialog弹窗关闭,不期望引擎被响应?
@bindoon 是这样的。这个是集团的 lowcode editor demo
https://lowcode-engine.cn/demo/index.html
操作一下:1. 选中 button 按钮,2. 点击后面的变量绑定按钮,3. 弹出框后按下 esc 这个时候弹框会关闭但是这个 button 的选中态也会取消。作为编辑器期望的效果应该是弹框关闭但是 button 不要取消选中
为什么取消选中:因为编辑器初始化就在 document.body 上监听处理了 esc,而 dialog 后出来依然是在 body 上监听处理 esc,这样只要按了 esc 肯定是编辑器先处理直接取消选中,这个不是期望行为,期望行为应该是 dialog 关闭,而编辑器不要取消选中。 所以就要想法让 dialog 优先处理 esc 并直接 stop 掉,解法就是 dialog 把 keydown 事件加在 wrapper 上就好。
@lakerswgq test case 已经提了,麻烦看一下
#4145
业务遇到的问题主要在两个方面:
- Dialog 组件的事件代理注册在 document.body 上,与集团低代码引擎的事件代理冲突,会误触发
- 由于历史原因,代码中有使用一些第三方 dialog 组件如
rc-dialog
,需要尽量兼容
针对问题1,目前推荐 Dialog 使用 capture 监听,可以保证 Dialog 的事件代理一定会触发,业务可以自己去停止事件继续冒泡,避免误触发低代码引擎在 document 上注册的全局监听。 不过由于问题2描述的第三方 dialog 的存在,如果 Fusion Dialog 已经使用 capture 监听,会最先触发,造成多个 Dialog 一起使用时发生关闭顺序错乱的问题。 为了能同时兼容问题 1,2 ,同时保证改造量尽可能小和通用,目前采用方案如下:
Dialog v2 开放两个能力:
- 支持配置 keydown 事件的代理监听节点,默认为 document.body,支持配置传入一个 dom element;现在 Dailog 同时支持配置弹层挂载节点和事件代理监听节点
- 支持 keydown 事件取消冒泡,默认为不取消冒泡
业务可以自己配置弹层挂载节点和事件代理节点,配置是否继续向上冒泡,防止与第三方库冲突 ,同时与其他弹层组件兼容