DropLab · Gitlab 中文文档

# DropLab > 原文：[https://docs.gitlab.com/ee/development/fe_guide/droplab/droplab.html](https://docs.gitlab.com/ee/development/fe_guide/droplab/droplab.html) * [Usage](#usage) * [Static data](#static-data) * [Explicit instantiation](#explicit-instantiation) * [Dynamic data](#dynamic-data) * [Internal selectors](#internal-selectors) * [Internal events](#internal-events) * [Plugins](#plugins) * [Usage](#usage-1) * [Documentation](#documentation) * [Development](#development) # DropLab[](#droplab "Permalink") 满足您所有自定义下拉菜单需求的通用下拉菜单. ## Usage[](#usage "Permalink") 只需添加`data-dropdown-trigger` HTML 属性即可使用 DropLab. 此属性使我们能够找到下拉菜单的"触发" *（切换）* ，无论是按钮，链接还是输入. `data-dropdown-trigger`应该是 DropLab 可以用来查找触发器的下拉列表的 CSS 选择器. 您还应该添加`data-dropdown`属性以声明下拉列表. 该值无关紧要. DropLab 类没有副作用，因此在 DOM 准备就绪时，必须始终调用`.init` . `DropLab.prototype.init`的参数与`DropLab.prototype.addHook`相同. 如果不提供任何参数，它将全局查询并实例化所有与 droplab 兼容的下拉菜单. ``` <a href="#" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown>  <ul> ``` ``` const droplab = new DropLab(); droplab.init(); ``` As you can see, we have a “Toggle” link, that is declared as a trigger. It provides a selector to find the dropdown list it should control. ### Static data[](#static-data "Permalink") 您可以添加静态列表项. ``` <a href="#" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown> <li>Static value 1</li> <li>Static value 2</li> <ul> ``` ``` const droplab = new DropLab(); droplab.init(); ``` ### Explicit instantiation[](#explicit-instantiation "Permalink") 您可以使用`DropLab.prototype.init`方法将 trigger 和 list 元素作为构造函数参数传递，以返回 DropLab 的非全局实例. ``` <a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown>  <ul> ``` ``` const trigger = document.getElementById('trigger'); const list = document.getElementById('list'); const droplab = new DropLab(); droplab.init(trigger, list); ``` 您还可以使用`DropLab.prototype.addHook`将挂钩添加到现有的 DropLab 实例. ``` <a href="#" data-dropdown-trigger="#auto-dropdown">Toggle</a> <ul id="auto-dropdown" data-dropdown><ul> <a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown><ul> ``` ``` const droplab = new DropLab(); droplab.init(); const trigger = document.getElementById('trigger'); const list = document.getElementById('list'); droplab.addHook(trigger, list); ``` ### Dynamic data[](#dynamic-data "Permalink") 将`data-dynamic`添加到下拉元素将启用动态列表呈现. 您可以使用提供的数据对象的键对列表项进行模板化. 使用车把语法`{{ value }}`使 HTML 转义该值. 使用`<%= value %>`语法可以简单地插值. 使用`<%= value %>`语法评估该值. 将对象数组传递给`DropLab.prototype.addData`将为该 DropLab 实例跟踪的所有`data-dynamic`下拉列表呈现该数据. ``` <a href="#" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown data-dynamic> <li><a href="#" data-id="{{id}}">{{text}}</a></li> </ul> ``` ``` const droplab = new DropLab(); droplab.init().addData([{ id: 0, text: 'Jacob', }, { id: 1, text: 'Jeff', }]); ``` 或者，您可以指定一个特定的下拉菜单，以将数据添加到该数据，但将数据作为第二个参数传递，并将 trigger 元素的`id`作为第一个参数传递. ``` <a href="#" data-dropdown-trigger="#list" id="trigger">Toggle</a> <ul id="list" data-dropdown data-dynamic> <li><a href="#" data-id="{{id}}">{{text}}</a></li> </ul> ``` ``` const droplab = new DropLab(); droplab.init().addData('trigger', [{ id: 0, text: 'Jacob', }, { id: 1, text: 'Jeff', }]); ``` 这使您可以轻松混合静态和动态内容，即使使用一个触发器也是如此. 请注意，在有关`data-dropdown`属性的范围内使用范围来捕获两个下拉列表，其中之一是动态的. ``` <input id="trigger" data-dropdown-trigger="#list"> <div id="list" data-dropdown> <ul> <li><a href="#">Static item 1</a></li> <li><a href="#">Static item 2</a></li> </ul> <ul data-dynamic> <li><a href="#" data-id="{{id}}">{{text}}</a></li> </ul> </div> ``` ``` const droplab = new DropLab(); droplab.init().addData('trigger', [{ id: 0, text: 'Jacob', }, { id: 1, text: 'Jeff', }]); ``` ## Internal selectors[](#internal-selectors "Permalink") DropLab 添加了一些 CSS 类，以帮助降低集成的障碍. 例如： * 将`droplab-item-selected` CSS 类添加到通过单击鼠标或 Enter 键选择的项目中. * 将`droplab-item-active` CSS 类添加到使用箭头键导航选择的项目中. * 您可以将`droplab-item-ignore` CSS 类添加到您不想选择的任何项目中. 例如，一个不应为交互式的`<li class="divider"></li>`列表分隔符元素. ## Internal events[](#internal-events "Permalink") DropLab 使用一些自定义事件来帮助降低集成障碍. 例如： * 单击`li`列表项时会触发`click.dl`事件. 当使用键盘选择了列表项时，也会触发该事件. 当它也烧`HookButton`按键（注册`button`标签或`a`标签触发）. * 所述`input.dl`当事件被触发`HookInput` （注册`input`标签触发）触发`input`事件. * 该`mousedown.dl`当事件被触发`HookInput`触发`mousedown`事件. * 该`keyup.dl`当事件被触发`HookInput`触发`keyup`事件. * 该`keydown.dl`当事件被触发`HookInput`触发`keydown`事件. 这些自定义事件将`detail`对象添加到提供一些潜在有用数据的原始`Event`对象. ## Plugins[](#plugins "Permalink") 插件是添加钩子后被注册为要执行的对象（实例化 droplab 触发器和下拉菜单时）. 如果未检测到模块 API，则该库将像使用`window.DropLab`那样回退，并添加`window.DropLab.plugins.PluginName` . ### Usage[](#usage-1 "Permalink") 要使用插件，您可以将它们作为`DropLab.prototype.init`或`DropLab.prototype.addHook`的第三个参数传递给数组. 一些插件需要配置值，可以将 config 对象作为第四个参数传递. ``` <a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown><ul> ``` ``` const droplab = new DropLab(); const trigger = document.getElementById('trigger'); const list = document.getElementById('list'); droplab.init(trigger, list, [droplabAjax], { droplabAjax: { endpoint: '/some-endpoint', method: 'setData', }, }); ``` ### Documentation[](#documentation "Permalink") * [Ajax plugin](plugins/ajax.html) * [Filter plugin](plugins/filter.html) * [InputSetter plugin](plugins/input_setter.html) ### Development[](#development "Permalink") 当为 droplab 触发器+下拉菜单初始化插件时，DropLab 将调用插件的`init`函数，因此必须在插件中实现. ``` class MyPlugin { static init() { this.someProp = 'someProp'; this.someMethod(); } static someMethod() { this.otherProp = 'otherProp'; } } export default MyPlugin; ```