前端开发中，UI 表单的制作往往是重复性劳动，且风格统一性难以保证。为了方便开发者，社区中常常出现一些好用的 UI 库和框架，如 Semantic UI。但 Semantic UI 使用起来可能会有些繁琐，需要保证一些命名规范和 HTML 结构，导致使用起来不太灵活。
此时，我们可以用 npm 包 bz-semantic-ui-form 为基础，进行快速表单制作。
什么是 bz-semantic-ui-form
bz-semantic-ui-form 是一个基于 Semantic UI 的 npm 包，封装了 Semantic UI 表单的样式，提供完整且易用的表单组件。
安装 bz-semantic-ui-form
使用 npm 安装 bz-semantic-ui-form：
npm install bz-semantic-ui-form
使用 bz-semantic-ui-form
在页面中引入需要的依赖。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
然后，就可以使用 bz-semantic-ui-form 提供的组件进行表单制作。
Input 输入框
<div class="ui field">
<label>用户名</label>
<div class="ui left icon input">
<input type="text" name="username" placeholder="请输入用户名">
<i class="user icon"></i>
</div>
</div>Dropdown 下拉框
-- -------------------- ---- -------
---- --------- -------
-----------------
---- --------- --------- ----------
------ ------------- --------------
-- --------------- ----------
---- -------------- -----------------
---- -------------
---- ------------ ----------------------
---- ------------ ----------------------
------
------
------Checkbox 多选框
-- -------------------- ---- -------
---- --------- -------
-----------------
---- -------------- --------
---- --------------
---- --------- ----------
------ --------------- ------------ ------------ -------------- ----------
-----------------
------
------
---- --------------
---- --------- ----------
------ --------------- ------------ ------------ -------------- ----------
-----------------
------
------
---- --------------
---- --------- ----------
------ --------------- ------------ ------------ -------------- ----------
-----------------
------
------
------
------Radio 单选框
-- -------------------- ---- -------
---- --------- -------
-----------------
---- -------------- --------
---- --------------
---- --------- ----- ----------
------ ------------ ------------- ------------ -------------- ----------
----------------
------
------
---- --------------
---- --------- ----- ----------
------ ------------ ------------- ------------ -------------- ----------
----------------
------
------
------
------总结
bz-semantic-ui-form 让 UI 表单的制作更加简单，使用起来更加灵活。在实际开发中，尽量避免重复造轮子，使用社区开源项目可以让开发效率大大提升。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde5783