前端开发中遇到的困难汇总

1.Text组件文字过长,支持换行和截断两种方式。其中截断省略方式,需要展示悬浮提示框。
如何实现一个通用的悬浮提示框是我遇到的一个难点。当鼠标靠近文字是,出现悬浮提示框,远离时,悬浮提示框消失。
经过一番的查阅资料,最后决定实现一个通用的钩子函数,去展示提示框。
将钩子函数定义为useTipBoxRef,传入一个参数,参数是表示要展示的文本内容,
初始化一个useRef的钩子,其中ref绑定悬浮的内容div
初始化一个dispaly的钩子,表示是否展示悬浮框
通过ref.current.getBoundingClientRect()获取悬浮内容div的left和top位置,也可以获取到文本的高度,计算得出悬浮框应处于的位置,最后通过事件监听鼠标是否在需要悬浮的位置,若在的话,将display设为true,展示悬浮提示,若不在则将display设为false,这个就是我的整体思路。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柯小帅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值