我在写H5-dooring时,发现我们用的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的。另外,需要暴露出强制刷新方法,在某些情况下需要刷新函数,比如监听windows的resize事件,这样位置变化后,再点击,就不会出现到原来的位置了。
代码如下:
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":
....
.........
}
}
复制代码
可以看看我的popover最终在H5编辑器(H 5-Dooring)里的效果,完全可以替代antd的popover组件且轻量.
popover地址:https://www.npmjs.com/package/yh-react-popover
里面有具体的使用介绍.
目前我们的H5-Dooring第一个落地版本基本完成, 主要实现功能如下:
组件库拖拽和显示
组件库动态编辑
H5页面实时/扫码预览功能
下载H5页面配置文件
保存为模版库功能
H5移动端跨端适配
媒体组件(视频组件)
在线下载网站代码功能
添加typescript支持
表单设计器/自定义表单组件
可视化图表组件实现, 包括编辑图表,图表数据导入导出
在线编程模块(Mini Web IDE)
添加图片库,支持用户在线选择图片素材
添加客服机器人
dooring管理后台初步完成
已修复bug数20+, github issue处理率92%, 欢迎各位提出有意思的issue.
正在规划功能
支持PSD文件导入一键生成H5
交互组件开发
音频组件开发
可嵌套组件开发
以上教程笔者已经集成到H5-Dooring中,对于一些更复杂的交互功能,通过合理的设计也是可以实现的,大家可以自行探索研究。
github????:H5-Dooring
如果想学习更多H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战,欢迎在《趣谈前端》一起学习讨论,共同探索前端的边界。
文章浏览阅读413次。编辑距离用于计算序列之间编辑距离和对齐的python模块。我需要一种方法来计算python中序列之间的编辑距离。我没有能够找到任何合适的库来实现这一点,所以我自己编写了一个。在那里似乎有许多可用于计算编辑的编辑距离库两个字符串之间的距离,但不是两个序列之间的距离。这完全是用python编写的。这种实现可能是在python中优化为更快。如果在C中实现。库API是根据difflib.sequencem..._edit distance python lib
文章浏览阅读3.8k次,点赞2次,收藏15次。antd 的upload组件是点开对话框后,按下确实就会上传,而且如果多选文件也会反复调用后端接口来完成上传。因为项目需要,所以要实现手动上传,和一次性上传多个文件(调用一次后端接口)在实现这个功能时,我翻阅了很多博客,可能是因为版本原因,很多代码都无用,最后还是通过翻阅官方文档,才最终实现。..._antd upload
文章浏览阅读246次。注意 第一步在一个文件下打开终端然后 sqlite3 student.db(创建一个数据库),然后再create stu。callback 回调函数 (只有sql为查询语句的时候,才会执行此语句)6--删除一列(sqlite3 不支持) 用下面方法。功能 :打开sqlite 数据库。功能 :关闭sqlite 数据库。基本sql命令,不以 . 夹头,db:指向sqlite句柄的指针。将新表的名字改为原来表的名字。sqlite3的基本命令。功能:执行一条sql语句。以 . 开头的命令。_sqlite 部署
文章浏览阅读1.4w次。前言canal-server同步到kafka本身是支持Kerberos方式的鉴权的,但是鉴于项目现在使用的kafka集群使用的是SASL/PLAIN的鉴权方式,所以需要对canal-server同步kafka做一下适配改造。准备kafka SASL/PLAIN鉴权的搭建我参考的这篇文章kafka SASL/PLAIN鉴权的搭建了解如何使用java向以SASL/PLAIN方式鉴权的kafk..._canal adapter kafka sasl
文章浏览阅读711次。adb(调试桥):debug工具。adb作用:借助adb工具,可以管理设备或手机模拟器状态。adb相关操作命令如下: 1. 显示系统中全部Android平台: android list targets2. 显示系统中全部AVD(模拟器): android list avd3. 创建AVD(模拟器): android create avd_android的shell命令工具:设备规范管理
文章浏览阅读769次,点赞10次,收藏7次。Centos 7.9 在线安装 VirtualBox 7.0_centos安装virtualbox
文章浏览阅读1.4w次,点赞9次,收藏10次。Autodesk卸载工具是一个专门用于Autodesk软件的卸载工具,可以自动识别电脑中的所有Autodesk软件,只需一键点击就能将Autodesk的软件完美卸载,并且不保留任何痕迹,这款卸载工具就可以帮助用户全面卸载Autodesk软件。_autodesk官方卸载工具
文章浏览阅读4.9k次。1.配置书写错误:配置文件value值引号内不能有空格,属性文件配置信息末尾不能有空格(1)打开属性文件中com.mysql.jdbc.Driver后发现多了一个空格(如下我标出了),所以写属性文件时一定别多输入多余的空格了。 jdbc.driverClassName=com.mysql.jdbc.Driver(此处有空格)(2)配置文件中的value值的" "号中前面或..._cannot find class: com.mysql.jdbc.driver
文章浏览阅读1.8k次。软件常用术语,免得你面对各种设计模式头发晕_软件术语
文章浏览阅读2.8k次。2017-08-02@erixhao 技术极客TechBoosterAI 机器学习第二篇 - 非线形回归分析。我们上文深入本质了解了机器学习基础线性回归算法后,本文继续研究非线性回归。非线性回归在机器学习中并非热点,并且较为小众,且其应用范畴也不如其他广。鉴于此,我们本文也将较为简单的介绍,并不会深入展开。非线性回归之后,我们会继续经典机器学习算法包括决策_非线性回归分析方法
文章浏览阅读164次。一、关系运算:1.等值比较: =语法:A=B操作类型:所有基本类型描述:如果表达式A与表达式B相等,则为TRUE;否则为FALSE举例:hive>select 1 from lxw_dual where 1=1;12.不等值比较: <>语法: A <> B操作类型:所有基本类型描述:如果表达式A为NULL,或者表..._josn mincol
文章浏览阅读767次。1 FI/SD 借口配置FI/SD通过tcode VKOA为billing设置过帐科目,用户可以创建自己的科目定义数据表。 科目是做到COA级的,通过KOFI/KOFK这两个condition type确定分别过帐到FI和CO凭证中。 由于PricingProc.是同Sale_sd 和fi 接口产生什么凭证?