悬浮按钮组件指的是悬浮于页面上方的按钮，就是使用的 css fixed 来定位的元素。悬浮按钮组件仅在 Ant Design 框架支持，Element Plus 并没有这个组件，不过这两个框架中都有 Backtop 回到顶部组件，本章内容我们将对比这个共有组件的属性。
Backtop 属性
| Antd | Element | 说明 |
|---|---|---|
| — | bottom | 控制其显示位置，距离页面底部距离 |
| duration | — | 回到顶部所需时间（ms） |
| target | target | 设置需要监听其滚动事件的元素 |
| visibilityHeight | visibility-height | 滚动高度达到此参数值才出现 |
| — | right | 控制其显示位置，距离页面右边距 |
Ant Design
FloatButton 与 FloatButton.Group 都是此框架独有的，这里就不再对组件的属性做介绍，详见：悬浮按钮 FloatButton – Ant Design
小结
两个 UI 框架都对回到顶部组件做了封装，看来这个是比较常见的需求，一般一个项目中悬浮组件也只会用到一次，Ant Design 是公司内部项目比较多所以对这个组件做了封装，对于一般项目来说在自己的项目中个性化封装这个组件就可以了。
参考链接：
- 悬浮按钮 FloatButton – Ant Design
- Backtop 回到顶部 | Element Plus
- ant-design/components/float-button/FloatButton.tsx at master · ant-design/ant-design · GitHub
- ant-design/components/float-button/BackTop.tsx at master · ant-design/ant-design · GitHub
- element-plus/packages/theme-chalk/src/backtop.scss at dev · element-plus/element-plus · GitHub
- element-plus/packages/components/backtop at dev · element-plus/element-plus · GitHub
发表回复