InputSetter

原文：https://docs.gitlab.com/ee/development/fe_guide/droplab/plugins/input_setter.html

• Usage

InputSetter

InputSetter是一个插件，当单击列表项时，该插件允许在 droplab 范围之外更新 DOM.

Usage

将InputSetter对象添加到DropLab.prototype.init或DropLab.prototype.addHook调用的插件数组中.

• InputSetter需要input和valueAttribute的配置值.
• input应该是要操作的 DOM 元素.
• valueAttribute应该是一个字符串，它是列表项上属性的名称，用于获取用于更新input元素的值.

您还可以将InputSetter配置设置为对象数组，这将允许您更新多个元素.

<input id="input" value="">
<div id="div" data-selected-id=""></div>

<input href="#" id="trigger" data-dropdown-trigger="#list">
<ul id="list" data-dropdown data-dynamic>
  <li><a href="#" data-id="{{id}}">{{text}}</a></li>
<ul> 

const droplab = new DropLab();

const trigger = document.getElementById('trigger');
const list = document.getElementById('list');

const input = document.getElementById('input');
const div = document.getElementById('div');

droplab.init(trigger, list, [InputSetter], {
  InputSetter: [{
    input: input,
    valueAttribute: 'data-id',
  } {
    input: div,
    valueAttribute: 'data-id',
    inputAttribute: 'data-selected-id',
  }],
});

droplab.addData('trigger', [{
  id: 0,
  text: 'Jacob',
}, {
  id: 1,
  text: 'Jeff',
}]); 

上方，如果第二个列表项被单击，它将更新#input元素的value 1 ，还将更新#div元素的data-selected-id到1 .

（可选）您可以将inputAttribute设置为一个字符串，该字符串是您要更新的input元素上的属性的名称. 如果你不提供inputAttribute ， InputSetter将更新value的的input ，如果它是一个元素INPUT元素，或者textContent的的input因素，如果它不是一个INPUT元素.