前言
在前端开发中，底部浮动栏(bottom dock)已经是一个很常见的UI组件了。如果我们每次都从零开始重新开发这个组件，那么将会浪费许多时间和精力。幸好，社区中已经有了许多成熟的npm包来帮助我们快速实现这个功能。
其中，bottom-dock就是一款非常好用的npm包，能够让我们通过简单的配置，快速开发出具有良好交互效果的底部浮动栏组件。下面，我们将详细介绍如何使用bottom-dock。
安装
使用npm进行安装：
npm install bottom-dock
或者使用yarn进行安装：
yarn add bottom-dock
使用方法
bottom-dock需要传入如下参数：
- items：底部浮动栏的按钮项，每一个项应包含图标和文本两个属性
- onClick：底部浮动栏中任意一个按钮被点击时调用
- mode：底部浮动栏的模式，可选"fixed"和"modal"，分别表示固定模式和模态模式
固定模式
在固定模式下，bottom-dock会一直显示在页面底部，并且不随页面滚动而移动。这种模式适用于应用程序的主界面，底部栏需要始终出现的场景。
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------
----- ----- - -
- ----- ------- ----- ---- --
- ----- ------- ----- ---- --
- ----- ---------- ----- ---- --
- ----- ------- ----- ---- --
--
-------- ------ -
----- ----------- - ------- -- -
---------------------------------
--
------ -
-----
--------------
----------- ------------- --------------------- ------------ --
------
--
-模态模式
在模态模式下，bottom-dock会在需要的时候才出现，例如，在点击一个按钮后，需要弹出一个包含多个选项的底部浮动栏来让用户做出选择。这种模式适用于需要用户交互的场景。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- --------------
----- ----- - -
- ----- -------- ----- ---- --
- ----- --------- ----- ---- --
- ----- --------- ----- ---- --
--
-------- -------- -
----- ---------- ------------ - ----------------
----- ----------- - -- -- -
-----------------------
--
----- --------------- - ------- -- -
---------------------------------
-------------------
--
------ -
-----
-------------
------- -----------------------------------
----------- ------------- ------------------------- ------------ --------------- --
------
--
-参数
items
底部浮动栏的按钮项数组，每一个项应包含如下两个属性：
- icon：按钮的图标名称，可参考iconfont
- text：按钮的文本
onClick
底部浮动栏中任意一个按钮被点击时调用的回调函数，它接受以下一个参数：
- index：被点击的按钮在items数组中的索引
mode
底部浮动栏的模式，可选"fixed"和"modal"，分别表示固定模式和模态模式，默认值为"fixed"。
show
在模态模式下，表示底部浮动栏是否显示，它是一个布尔值，并且默认值为false。
className
底部浮动栏的CSS类名称，可用于自定义样式。
结语
bottom-dock是一款非常好用的底部浮动栏npm包，它能够帮助我们快速开发出流畅交互、美观大方的功能组件。希望通过本文的介绍，能够让读者更好地了解如何使用该组件，并能够在自己的项目中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c83ccdc64669dde4ddd