前端开发中，选用合适的样式库和插件十分重要，可以在开发中加速展示效果，增强用户体验。Bulma 是一款基于 Flexbox 的现代 CSS 框架，起源于 Sass，易于学习和使用。本文将介绍如何使用 Bulma-Tagsinput，这是一款可用于构建类似于 Facebook 的项列表的 npm 包。
安装 Bulma-Tagsinput
使用 npm 可以轻松安装 Bulma-Tagsinput：
npm install bulma-tagsinput --save
引入样式表和脚本
在 HTML 文件中引入样式表和脚本：
<link rel="stylesheet" href="./node_modules/bulma/css/bulma.min.css"> <link rel="stylesheet" href="./node_modules/bulma-tagsinput/dist/css/bulma-tagsinput.min.css"> <script src="./node_modules/bulma-tagsinput/dist/js/bulma-tagsinput.min.js"></script>
使用 Bulma-Tagsinput
创建一个包含输入框和一个列表的 div 容器：
<div id="tags"></div>
使用 JavaScript 调用 Bulma-Tagsinput：
var tags = document.getElementById('tags');
// 初始化 Bulma-Tagsinput
const tagsinput = new window.bulmaTagsinput(tags);
// 添加新的存储单元
tagsinput.add('example');现在，在 div 容器中将出现一个输入框和一个“清除标签”的按钮。
配置 Bulma-Tagsinput
如有必要，还可以按照自己的需求自定义大量项，例如插件可以设置样式、预设、delimiter 等：
-- -------------------- ---- -------
--- ---- - --------------------------------
-- --- ------------------------
----- --------- - --- --------------------------- -
------ -------
------ --
------ -
- ---- ------ ------ ---- --
- ---- ------- ------ ---- --
- ---- -------- ------ ---- --
- ---- --------- ------ ---- --
--
---------- ----
---
-- --------
----------------------以上代码中，样式为1，即预设的样式，设置的数组中每个对象都有 key 和 value 属性，二者一同显然键-值对，delimiter为冒号。
总结
Bulma-Tagsinput 包是一款非常实用的工具，能够让我们轻松地创建一个可定制的项目数据列表。通过以上介绍，相信大家已经了解了它的基本用法和配置，能够快速上手了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8dccdc64669dde54c4