antd popover定位不准闪跳解决+自己实现popover库

徐小夕 等级 437 0 0

前言

我在写H5-dooring时,发现我们用的popover会发生闪跳,而且第一次闪跳就算了,每次还会有另一个方向的闪跳。

于是我大概百度了下,基本都说需要给固定宽高即可,让后试了下发现没用,就算触发组件和弹窗元素都给了宽高,也一样闪跳。由于antdpopover底层的实现是套其他第三方的库,第三方库又用到了其他的前端组件, 所以锁心自己实现一个。

正文

初步实现

首先,我对popover粗略进行实现,主要就是一个弹窗定位问题,然后我照我预想实现后发现,一样会出现闪跳,但只有第一次会闪跳,后面比较正常: antd popover定位不准闪跳解决+自己实现popover库 可以看见,第一次显示会在左边,后续显示位置都ok。 所以思路就是让其在第一次显示时进行处理,顺便实现动画效果,不至于出现那么突兀。 由于我想做一个除react外零依赖的,所以就不考虑react-transition-group或者styledcomponent,直接进行手撸动画。

实现思路

由上图可以发现, 第一次漂移问题直接使用动画解决,将opacity置为0即可。

@keyframes yhmodalopenanimate{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes yhmodalcloseanimate{
    0%{
        opacity:1;
    }

    100%{
        opacity: 0;
    }
}

.yhmodalopen{
    animation: yhmodalopenanimate 0.15s ease-in;
}

.yhmodalclose{
    animation: yhmodalcloseanimate 0.15s ease-in;
}

在实现过程中发现,如果元素(也就是包裹的元素加上弹窗的元素)形变或者有那种改变外形的动画,会导致定位不正确,我进行计算位置时需要拿到两者的dom的。 另外,需要暴露出强制刷新方法,在某些情况下需要刷新函数,比如监听windowsresize事件,这样位置变化后,再点击,就不会出现到原来的位置了。

代码如下:

useEffect(() => {
    if (callback) {
        callback(() => forceRender((v) => v + 1));
    }
}, [callback]);

useEffect(() => {
    const handler = () => {
        forceRender((prev) => prev + 1);
    };
    window.addEventListener("resize", handler);
    return () => {
        window.removeEventListener("resize", handler);
    };
}, [forceRender]);

还有个监听事件的问题,这里我暴露参数,让用户判断是否需要点击Modal外进行关闭。 剩下的都是体力活,算位置即可:

export type PopDirections =
    | "TL"
    | "TOP"
    | "TR"
    | "LT"
    | "LEFT"
    | "LB"
    | "BL"
    | "BOTTOM"
    | "BR"
    | "RT"
    | "RIGHT"
    | "RB";

export function switchPosition(
    sign: PopDirections,
    modalrect: DOMRect,
    popconfirmrect: DOMRect,
    scroll: number
): CSSProperties {
    let triangle = 8;
    switch (sign) {
        case "TL":
            return {
                top: popconfirmrect.top + scroll - modalrect.height - triangle,
                left: popconfirmrect.left,
            };
        case "TOP":
        ....
        case "TR":
        ....
.........
    }
}

效果展示

antd popover定位不准闪跳解决+自己实现popover库 可以看看我的popover最终在H5编辑器(H 5-Dooring)里的效果,完全可以替代antdpopover组件且轻量.

popover地址:点我直达

里面有具体的使用介绍.

目前我们的H5-Dooring第一个落地版本基本完成, 主要实现功能如下:

  • 组件库拖拽和显示
  • 组件库动态编辑
  • H5页面实时/扫码预览功能
  • 下载H5页面配置文件
  • 保存为模版库功能
  • H5移动端跨端适配
  • 媒体组件(视频组件)
  • 在线下载网站代码功能
  • 添加typescript支持
  • 表单设计器/自定义表单组件
  • 可视化图表组件实现, 包括编辑图表,图表数据导入导出
  • 在线编程模块(Mini Web IDE)
  • 添加图片库,支持用户在线选择图片素材
  • 添加客服机器人
  • dooring管理后台初步完成

已修复bug数20+, github issue处理率92%, 欢迎各位提出有意思的issue.

最后

以上教程笔者已经集成到H5-Dooring中,对于一些更复杂的交互功能,通过合理的设计也是可以实现的,大家可以自行探索研究。

github地址:H5在线编辑器H5-Dooring

如果想学习更多H5游戏, webpacknodegulpcss3javascriptnodeJScanvas数据可视化等前端知识和实战,欢迎在《趣谈前端》一起学习讨论,共同探索前端的边界。

更多推荐

收藏
评论区

相关推荐

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
《精通react/vue组件设计》之实现一个健壮的警告提示(Alert)组件
前言 本文是笔者写组件设计的第七篇文章, 今天带大家实现一个自带主题且可关闭的Alert组件, 该组件在诸如Antd或者elementUI等第三方组件库中都会出现,主要用
antd popover定位不准闪跳解决+自己实现popover库
前言 我在写H5dooring(https://github.com/MrXujiang/h5Dooring)时,发现我们用的popover会发生闪跳,而且第一次闪跳就算了,每次还会有另一个方向的闪跳。 于是我大概百度了下,基本都说需要给固定宽高即可,让后试了下发现没用,就算触发组件和弹窗元素都给了宽高,也一样闪跳。由于antd的popover底层
Android WebView加载优化
1.前言 最近几年关于原生WebView与H5混合开发的项目越来越多,这种开发带来了很多便利,但也会有一些缺点,比如说通过WebView加载H5会有一定的卡顿现象,会影响用户体验。下面本文就此问题一一展开讨论。 2. 场景 根据日常需求一般是通过webView.loadUrl()方法加载指定的网页,其大概流程如下: (https://i
Android通过URL打开Activity
关注公众号 QXF069 为每个 Activity 绑定一个 url 可以方便的让第三方 app 直接打开这些 Activity。也可以方便在 app 内部进行页面跳转,解耦。 背景 举一个常见的案例,假设我们有个产品 A,产品 A 包含 h5 网页端和客户端,当用户在手机打开我们的 h5 网页端的时候,我们会期望如果用户手机安装了我们的客户端,则直接打
H5游戏开发:FC小蜜蜂 | Aotu.io「凹凸实验室」
H5游戏开发:FC小蜜蜂 by TH(https://github.com/ONESUNDAY) on 20180128 使用 Phaser 游戏引擎开发,主要
H5游戏开发:消灭星星 | Aotu.io「凹凸实验室」
H5游戏开发:消灭星星 by leeenx(https://github.com/leeenx) on 20180
从零开发一款可视化大屏制作平台
几个月前开源的H5页面制作平台H5Dooring(http://h5.dooring.cn/) 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring(https://github.com/MrXujiang/v6.dooring.public). 接下来笔者就来带大家一起看看我们的方案设计和技术实现
vue h5 对接支付宝,微信支付,微信js支付
vue h5 实现支付(支付宝,微信) h5端实现支付难度不大,只是有些小的点需要注意下,其他的看文档撸就行了。 支付宝很简单,后端返回一个 html ,前端插入调用就行了,微信支付分两种:1、微信内支付(jsapi,微信内浏览器)2、微信外支付(h5支付)。 一、支付宝支付 // 前端啥都不用管,交给后端去干,返回 html 调用点击就好了 /
React Hook实战项目(含axios封装,双层路由的使用,redux的使用)
好久没写文章了,今天就来介绍下最近写的react hook的练手项目,用到相关的技术有以下: antd,reactrouterdom,reduxthunk,axios,hook,下面就开始介绍自己的项目了。项目比较简单,只是把架子搭好了,后面会继续完善。这是我的项目地址 https://github.com/Hongguobin/createa
php操作redis哨兵模式,主从切换后自动获取master
本文将介绍如何使用PHP来连接redis哨兵模式。哨兵模式:大概的原理就是监听redis主库心跳包,如果心跳断开,则枚举一个从库推举成为新的主库,防止redis宕机不能使用。为了增强redis的性能,防止其挂掉,引用redis哨兵监控redis集群是个不错的选择。下面三步简单记录php连接redis哨兵。 第一步、获取哨兵模式连接redis句柄对象/
RN react-navigation使用
一、命令安装 npm install reactnavigation save 该库包含三类组件: (1)StackNavigator:用来跳转页面和传递参数 (2)TabNavigator:类似底部导航栏,用来在同一屏切换不同页面
windows中 redis server 双击闪退
错误重现bash 进入redis安装目录执行以下命令redisserver.exe redis.windows.conf报错: [19572] 01 May 21:13:17.815 Creating Server TCP listening socket :6379: listen: Unknown error 解决方法:修改 redis.windows
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
Ory Kratos 用户认证
为用户认证与管理系统。本文将动手实现浏览器(React+AntD)的完整流程,实际了解下它的 API 。 代码: https://github.com/ikuokuo/startorykratos 了解 Kratos 获取代码bashgit clone b v0.7.0alpha.1 depth 1 https://github.com/ory/kratos