介绍
在前端开发过程中，使用 UI 组件库能够提升开发效率，降低代码量。而 Semantic UI 是一款流行的 UI 组件库之一，在这里介绍其下的 dropdown 组件（下拉框），并且使用 npm 包 bz-semantic-ui-dropdown 快速接入开发。
安装
使用 npm 包管理工具进行安装：
npm install --save-dev bz-semantic-ui-dropdown
使用
引入
在需要使用 dropdown 的页面或组件中引入 semantic-ui-css 和 bz-semantic-ui-dropdown：
<!-- 引入 css --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css" /> <!-- 引入 dropdown --> <link rel="stylesheet" href="../node_modules/bz-semantic-ui-dropdown/css/bz-dropdown.min.css" /> <script src="../node_modules/bz-semantic-ui-dropdown/js/bz-dropdown.min.js"></script>
基本用法
在需要添加 dropdown 的页面或组件中，按照如下代码添加 dropdown：
-- -------------------- ---- -------
---- --------- --------- ----------
------ ------------- --------------
-- --------------- ----------
---- -------------- --------------------
---- -------------
---- ------------ ----------------------------
---- ------------ --------------------------------
------
------上述代码添加了一个简单的 dropdown，其中包含了一个隐藏的输入框 <input type="hidden" name="gender">，如需获取选择的值可以通过输入框的 name 进行获取。在 dropdown 中，使用 <div class="menu"> 存放下拉框的值，其中每个选项都使用 <div class="item"> 进行封装。
最后，通过 JS 初始化 dropdown：
$('.ui.dropdown').dropdown();自定义例子
在 dropdown 中可以自定义选项内容和样式，下面是一个自定义表单的例子：
-- -------------------- ---- -------
---- --------- ------
---- ------------- -------
------------- -----------
---- --------- --------- ----------
------ ------------- -----------
-- --------------- ----------
---- -------------- ------------ ---------
---- -------------
---- ------------ ------------------------------------
---- ------------ ----------------------------
---- ------------ --------------------------
------
------
------
------- --------- -----------------------
------初始化：
$('.ui.dropdown').dropdown({
fullTextSearch: true,
selectOnNavigation: false,
onChange: function(value, text, $selectedItem) {
console.log('Selected value:', value);
}
});在初始化时，可以通过传入配置设置 dropdown。上述代码传入了三个配置：
fullTextSearch: true：开启搜索功能，用户可以通过输入筛选下拉框的内容；selectOnNavigation: false：关闭键盘方向键选中选项功能；onChange: function(value, text, $selectedItem) {...}：设置选择后的回调函数，其中参数value表示选择的值，text表示选择的文本，$selectedItem表示选择的元素。
API
以下是 dropdown 的一些常用 API：
$('.ui.dropdown').dropdown('show')：显示 dropdown；$('.ui.dropdown').dropdown('hide')：隐藏 dropdown；$('.ui.dropdown').dropdown('refresh')：刷新 dropdown，当动态修改 dropdown 时使用；$('.ui.dropdown').dropdown('get value')：获取输入框内的值；$('.ui.dropdown').dropdown('set value', 'value')：设置输入框内的值。
更多 API 可以查阅官方文档。
总结
上述就是 npm 包 bz-semantic-ui-dropdown 的使用教程，可以帮助开发者快速接入 dropdown 组件。当然，dropdown 组件还有很多使用技巧和配置，需要开发者自行探索使用。希望本文对于前端开发者的学习和工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde577d