前端开发中，选用合适的样式库和插件十分重要，可以在开发中加速展示效果，增强用户体验。Bulma 是一款基于 Flexbox 的现代 CSS 框架，起源于 Sass，易于学习和使用。本文将介绍如何使用 Bulma-Tagsinput，这是一款可用于构建类似于 Facebook 的项列表的 npm 包。
安装 Bulma-Tagsinput
使用 npm 可以轻松安装 Bulma-Tagsinput：
--- ------- --------------- ------
引入样式表和脚本
在 HTML 文件中引入样式表和脚本：
----- ---------------- ---------------------------------------------- ----- ---------------- ----------------------------------------------------------------------- ------- -----------------------------------------------------------------------------
使用 Bulma-Tagsinput
创建一个包含输入框和一个列表的 div 容器：
---- ----------------
使用 JavaScript 调用 Bulma-Tagsinput：
--- ---- - -------------------------------- -- --- --------------- ----- --------- - --- ---------------------------- -- -------- -------------------------
现在，在 div 容器中将出现一个输入框和一个“清除标签”的按钮。
配置 Bulma-Tagsinput
如有必要，还可以按照自己的需求自定义大量项，例如插件可以设置样式、预设、delimiter 等：
--- ---- - --------------------------------
-- --- ------------------------
----- --------- - --- --------------------------- -
------ -------
------ --
------ -
- ---- ------ ------ ---- --
- ---- ------- ------ ---- --
- ---- -------- ------ ---- --
- ---- --------- ------ ---- --
--
---------- ----
---
-- --------
----------------------以上代码中，样式为1，即预设的样式，设置的数组中每个对象都有 key 和 value 属性，二者一同显然键-值对，delimiter为冒号。
总结
Bulma-Tagsinput 包是一款非常实用的工具，能够让我们轻松地创建一个可定制的项目数据列表。通过以上介绍，相信大家已经了解了它的基本用法和配置，能够快速上手了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8dccdc64669dde54c4