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

徐小夕 等级 795 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通过URL打开Activity
关注公众号 QXF069 为每个 Activity 绑定一个 url 可以方便的让第三方 app 直接打开这些 Activity。也可以方便在 app 内部进行页面跳转,解耦。 背景 举一个常见的案例,假设我们有个产品 A,产品 A 包含 h5 网页端和客户端,当用户在手机打开我们的 h5 网页端的时候,我们会期望如果用户手机安装了我们的客户端,则直接打
H5调取APP或跳转至下载
#### 来源:   最近在配合移动端做几个详情页h5分享页面,需要调取App并跳转至app详情页, 如果没有安装App,需要判断引导至下载页面。 #### 参考文档: [https://juejin.im/post/5b7efb2ee51d45388b6af96c](https://www.oschina.net/action/GoToLink?u
.html 的文件如何使用 php
### 应用场景 有一个待开发的 H5,客户部的同事需要先给一个链接,先去印刷物料。 想到是 h5,那必然是.html 文件,于是給客户部的同时生成了一个二维码内容为 `https://xxx.com/h5.html` 的二维码。 结果前端小朋友开发是使用的 `[php](https://www.oschina.net/p/php)` 混合 `htm
HTML5游戏开发凭什么这么火?看了你就知道了...
很多人都会问[H5游戏](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fedu.51cto.com%2Fcourse%2Fcourse_id-1307.html)有前途吗?其实我个人是比较看好H5的前景,尤其是在这个移动互联网的时代,Web技术的触角必然会深入到各个领域. 当然H5目前仍然
verilog状态机控制led闪烁
一、功能 用三段式状态机控制LED,按键,按下是0.5s闪烁一次,再次按按键A是1s闪烁。 二、状态机转移图  ![](https://images2018.cnblogs.com/blog/1107111/201809/1107111-20180909221523505-1784921687.png) 三、连线 ![](https://oscim
Android Native crash 处理案例分享
1\. 背景 ------ 目前 mPaas\[1\] Android使用Crash SDK对闪退进行的处理,CrashSDK 是 Android 平台上一款功能强大的崩溃日志收集 SDK,有着极高的崩溃收集率和完整、全面的崩溃日志信息,生成的日志内容非常利于问题的跟进和解决。在日常运维中,经常遇到一些闪退,无法直接从闪退堆栈找到原因,尤其是一些非Java
Android原生和H5交互;Android和H5混合开发;WebView点击H5界面跳转到Android原生界面。
当时业务的需求是这样的,H5有一个活动商品列表的界面,IOS和Android共用这一个界面,点击商品可以跳转到Android原生的商品详情界面并传递商品ID;  大概就是**点击H5界面跳转到Android原生界面**; 好了,需求已经分析完毕了,Android只需要获取H5的点击事件和传递的参数; 来,上代码: /启用支持javascript
Antd Vue 表单生成快速开发指南
之前发布了一款基于Element的表单设计器,可以快速设计和生成表单,设计器地址:[http://form.making.link/](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fform.making.link%2F)。现在我可以告诉大家,Antd表单支持来了,可以使用设计器设计好表单后
ExMobi+Agile Lite开发内置浏览器APP
微信对内置浏览器的定制封装,使得H5的流量入口再次重新被定义。在原生程序中使用H5也成为非常必要的一种搭配。这也得益于H5对于简单的浏览性质的内容可以很好的进行展现和传播。 由于在实际项目中有需要在移动端使用到H5,而大部分H5页面都是来源于网络的,所以这里尝试使用[ExMobi](https://www.oschina.net/action/GoToLi
FullCalendar使用踩坑之popover
FullCalendar是一个强大的jquery日历插件,可以实现很多的常用的日历功能。不过虽然英文文档很强大,也有很多热心的大神将英文文档翻译成了中文文档,但是文档中还是有一些遗漏的地方。 这里就分享一下我使用FullCalendar日历popover所学到的东西。由于event事件标签太小,所以需要用到hover显示更多的信息,最开始使用了eventH
stm32 库函数(按键控制led灯闪烁)最简单易懂的使用方法
STM32 使用库函数(按键控制led不同的闪烁效果) 下面是main.c #include "stm32f10x.h" #include "led.h"` #include "key.h" int main(void) { while(1) {
(转)友盟+短视频行业研究
好买网(www.goodmai.com)2019年1月15日,字节跳动的陈林、云歌人工智能科技的王欣和北京快如科技的罗永浩分别发布了三款社交产品:主打短视频社交的多闪、主打匿名社交的马桶MT和转型为网赚模式的聊天宝。2个月后硝烟散尽,但见一地鸡毛。马桶“夭折”,聊天宝“解散”,对于短视频社交应用“多闪”,好评并不多见,“画地圈人”的质疑倒是若隐若现。友盟+基