# 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; 
```