floating-ui基本使用 #

这个第三方组件能用来做什么? #

这是一个专门解决浮动元素定位问题的工具。

具体能做什么？

• 实现 tooltips 功能
• 实现 Popover 功能
• 实现 下拉菜单 功能

第三方 UI 库基本都有这些功能了为什么还要自己学着做一个？

以Element Plus为例，他的tooltips,Popover实际是立即创建的。但销毁却是在切换路由的时候销毁。

立即创建啥意思？

立即创建的意思是，我还没触发这个功能，但 Element 已经帮我创建好对应 dom 元素了，只不过是不可见状态。

立即创建有什么问题？

会导致界面创建太多的 dom 节点，dom 节点过多就会导致页面卡顿。为什么 dom 元素过多会造成卡顿？一个是渲染复杂度增加。另一个是 vue 要瞬间创建的 dom 和销毁的 dom 也会增多。大量的 dom 创建和销毁都是一个高消耗的工作。

关联文章 #

• 工具提示
• 自定义指令
• vue 组件多种写法

依赖安装 #

pnpm instll @floating-ui/dom

floating-ui 官网

基本 html 结构 #

使用绝对定位让 tooltip 元素浮动起来 #

设置 tooltip 的位置(默认在底部) #

手动设置 tooltip 的位置 #

tooltip 位置不合理，部分被遮挡 #

tooltip 内容过多，部分被遮挡 #

tooltip 元素与按钮元素靠太紧了 #

中间件作用说明 #

• offset: 修改参考元素和浮动元素之间的间距
• shift: 移动浮动元素，让它保持始终可见。它还会处理元素溢出到窗口之外的情况。
• flip： 帮我们修改坐标，如果我们设置浮动元素在顶部，但是距离顶部太近，会放置到底部。不能和autoPlacement中间件一起使用
• inline: 改进跨多行的内联元素的定位，比如 a 标签。
• arrow: 计算箭头位置。中间件应该在中间件数组的末尾。如果使用了shift中间件，则至少必须在shift中间件之后
• size： 可以用来改变浮动元素的的宽高
• autoPlacement： 自动计算浮动元素位置，会选择空白空间最多的作为浮动元素的位置
• hide: 该中间件的位置应该在中间件数组的末尾。应该放在中间件数组的开头位置，如果同时使用了 flip 组件，那至少要放在 flip 组件之前

加个箭头 #

仅鼠标移入时显示 tooltip #

加入动效 #

多级菜单 #

tooltips 通过饥饿模式创建 #

灵感来源：基于 el-tooltip 二次封装的 tool-tip-ellipsis 全局气泡提示

但上面那个博文里写的方式，略显复杂，还需要使用 vuex, 那还不如从根本上解决这个问题，顺便练手

啥意思？ 只有在需要显示的时候才创建 tooltip, 不需要显示的时候就销毁

为什么要做这种东西？ 避免大数据量下 tooltip 创建太多 dom 节点，加速界面卡顿的发生

项目中有遇到过这种情况？el-tooltip 不会销毁吗? 项目中有遇到这种情况，el-tooltip 会销毁，但销毁的时机是切换路由的时候

右键菜单 #

参考资料 #

vue3 使用自定义指令制作简易 Tooltip 组件

Vue 小知识- 问题解决-tooltip 组件封装