ui-lib/lib/ui/dropdown.html

<div>
  <h1>dropdown</h1>
  <hr />
  <p>
    创建一个统一样式的下拉输入、选择框元素，或者解析转换页面上的 select 标签为该元素。
  </p>
  <h2>constructor</h2>
  <code>new(options?: DropdownOptions): Dropdown</code>
  <h3>options?: DropdownOptions</h3>
  <p>
    下拉输入、选择框的初始参数，结构为
  <pre>interface DropdownOptions {
    textkey?: string;
    valuekey?: string;
    htmlkey?: string;
    maxlength?: Number;
    multiselect?: boolean;
    selected?: string;
    selectedlist?: Array&lt;DropdownItem | any&gt;;
    disabled?: boolean;
    input?: boolean;
    search?: boolean;
    searchkeys?: Array&lt;string&gt;;
    searchplaceholder?: string;
    tabindex?: Number;
    placeholder?: string;
    slidefixed?: boolean;
    parent?: HTMLElement;
}</pre>
  </p>
  <h4>textkey?: string</h4>
  <p>
    数据源中用以显示的属性，默认为 <code>text</code>
  </p>
  <h4>valuekey?: string</h4>
  <p>
    数据源中作为值的属性，默认为 <code>value</code>
  </p>
  <h4>htmlkey?: string</h4>
  <p>
    数据源中用来以 html 方式呈现的属性，默认为 <code>html</code>
  </p>
  <h4>maxlength?: Number</h4>
  <p>
    作为输入类型时的最大允许字符数，默认为 500
  </p>
  <h4>multiselect?: boolean</h4>
  <p>
    是否允许多选，仅在选择类型下有效
  </p>
  <h4>selected?: string</h4>
  <p>
    默认选中的项目的值
  </p>
  <h4>selectedlist?: Array&lt;DropdownItem | any&gt;</h4>
  <p>
    多选时默认选中的项目的值的列表
  </p>
  <h4>disabled?: boolean</h4>
  <p>
    初始化时下拉框是否禁用
  </p>
  <h4>input?: boolean</h4>
  <p>
    是否为输入类型
  </p>
  <h4>search?: boolean</h4>
  <p>
    是否允许搜索
  </p>
  <h4>searchkeys?: Array&lt;string&gt;</h4>
  <p>
    搜索时搜索的数据源属性的列表，默认为 <code>[valuekey]</code>
  </p>
  <h4>searchplaceholder?: string</h4>
  <p>
    搜索输入框的占位字符串
  </p>
  <h4>tabindex?: Number</h4>
  <p>
    下拉框的焦点顺序
  </p>
  <h4>placeholder?: string</h4>
  <p>
    作为输入类型时，输入框的占位字符串
  </p>
  <h4>slidefixed?: boolean</h4>
  <p>
    下拉方向是否固定为下
  </p>
  <h4>parent?: HTMLElement</h4>
  <p>
    下拉列表呈现的父容器，默认为 <code>document.body</code>
  </p>
  <h2>Dropdown.resolve</h2>
  <code>static resolve(dom?: HTMLElement): HTMLElement</code>
  <h3>dom?: HTMLElement</h3>
  <p>
    将把此 HTML 元素，为 null 则把 document.body 下的所有 <code>select</code> 元素解析为统一样式的下拉框
  </p>
  <hr />
  <h2>sourceFilter</h2>
  <code>sourceFilter: () => Array&lt;DropdownItem | any&gt;</code>
  <p>
    数据源代理，返回用以呈现在下拉列表中的数据源
  </p>
  <h2>onselected</h2>
  <code>onselected: (item: DropdownItem | any) => void</code>
  <h3>item: DropdownItem | any</h3>
  <p>
    选中项发生改变时触发该事件，参数为选中的项
  </p>
  <h2>onselectedlist</h2>
  <code>onselectedlist: (list: Array&lt;DropdownItem | any&gt;) => void</code>
  <h3>list: Array&lt;DropdownItem | any&gt;</h3>
  <p>
    多选时选中列表发生改变时触发该事件，参数为选中的列表
  </p>
  <h2>onexpanded</h2>
  <code>onexpanded: () => void</code>
  <p>
    下拉列表展开时触发该事件，一般用来异步获取服务器数据，填充至数据源
  </p>
  <hr />
  <h2>disabled</h2>
  <code>property disabled(): boolean</code>
  <p>
    获取或设置下拉框是否禁用
  </p>
  <h2>source</h2>
  <code>property source(): Array&lt;DropdownItem | any&gt;</code>
  <p>
    获取或设置下拉框数据源
  </p>
  <h2>multiselect</h2>
  <code>readonly multiselect: boolean</code>
  <p>
    获取下拉框是否支持多选
  </p>
  <h2>selected</h2>
  <code>readonly selected: DropdownItem | any</code>
  <p>
    获取下拉框当前选中项
  </p>
  <h2>selectedlist</h2>
  <code>readonly selectedlist: Array&lt;DropdownItem | any&gt;</code>
  <p>
    获取下拉框当前选中的列表
  </p>
  <hr />
  <h2>create</h2>
  <code>create(): HTMLElement</code>
  <p>
    创建下拉列表，返回一个 HTML 元素
  </p>
  <h2>select</h2>
  <code>select(selected: string, silence?: boolean): void</code>
  <h3>selected: string</h3>
  <p>
    修改下拉框的选中项为参数值对应的项
  </p>
  <h3>silence?: boolean</h3>
  <p>
    是否静默修改，为 true 时不触发 <code>onselected</code> 事件
  </p>
  <h2>selectlist</h2>
  <code>selectlist(selectedlist: Array&lt;string&gt;, silence?: boolean): void</code>
  <h3>selectedlist: Array&lt;string&gt;</h3>
  <p>
    修改下拉框的选中列表为参数值列表对应的项的列表
  </p>
  <h3>silence?: boolean</h3>
  <p>
    是否静默修改，为 true 时不触发 <code>onselectedlist</code> 事件
  </p>
  <hr />
  <h2>示例</h2>
  <pre>&lt;div id="dropdown-sample"&gt;
  &lt;select&gt;
    &lt;option value="cs1"&gt;Case 1&lt;/option&gt;
    &lt;option value="cs2" selected&gt;Case 2&lt;/option&gt;
    &lt;option value="cs3"&gt;Case 3&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
  const Dropdown = window["lib-ui"].Dropdown;
  const sample = document.querySelector('#dropdown-sample');

  // 解析 select 元素
  Dropdown.resolve(sample);

  // 创建简易输入类型下拉框
  let drop = new Dropdown({
    input: true,
    // selected: 'standby',
    placeholder: 'asset status',
    slidefixed: true
  });
  drop.source = ['off', 'running', 'standby', 'broken']
    .map(it => { return { value: it, text: it } });
  sample.appendChild(drop.create());

  // 创建自定义显示元素的下拉框
  drop = new Dropdown({
    selected: '#ff0',
    search: true,
    // multiselect: true
  });
  drop.source = [
    { value: '#fff', text: 'White' },
    { value: '#f00', text: 'Red' },
    { value: '#0f0', text: 'Green' },
    { value: '#00f', text: 'Blue' },
    { value: '#ff0', text: 'Yellow' },
    { value: '#0ff', text: 'Cyan' },
    { value: '#f0f', text: 'Magenta' },
  ];
  drop.source.forEach(it => {
    const span = document.createElement('span');
    span.className = 'ui-drop-item';
    span.style.setProperty('--color', it.value);
    span.innerText = it.text;
    it.html = span;
  });
  sample.appendChild(drop.create());
&lt;/script&gt;</pre>
    <div id="dropdown-sample">
    <select>
      <option value="cs1">Case 1</option>
      <option value="cs2" selected>Case 2</option>
      <option value="cs3">Case 3</option>
    </select>
  </div>
  <div style="height: 80px"></div>
  <script type="text/javascript">
    !function () {
      const Dropdown = window["lib-ui"].Dropdown;
      const sample = document.querySelector('#dropdown-sample');

      Dropdown.resolve(sample);

      let drop = new Dropdown({
        input: true,
        // selected: 'standby',
        placeholder: 'asset status',
        slidefixed: true
      });
      drop.source = ['off', 'running', 'standby', 'broken']
        .map(it => { return { value: it, text: it } });
      sample.appendChild(drop.create());

      drop = new Dropdown({
        selected: '#ff0',
        search: true,
        // multiselect: true
      });
      drop.source = [
        { value: '#fff', text: 'White' },
        { value: '#f00', text: 'Red' },
        { value: '#0f0', text: 'Green' },
        { value: '#00f', text: 'Blue' },
        { value: '#ff0', text: 'Yellow' },
        { value: '#0ff', text: 'Cyan' },
        { value: '#f0f', text: 'Magenta' },
      ];
      drop.source.forEach(it => {
        const span = document.createElement('span');
        span.className = 'ui-drop-item';
        span.style.setProperty('--color', it.value);
        span.innerText = it.text;
        it.html = span;
      });
      sample.appendChild(drop.create());
    }();
  </script>
  <style type="text/css">
    #dropdown-sample {
      display: flex;
    }

    #dropdown-sample>.ui-drop-wrapper {
      width: 200px;
      margin-right: 10px;
    }

    .ui-drop-item {
      font-size: .75rem !important;
      padding: 0 0 0 22px !important;
      position: relative;
    }

    .ui-drop-item::before {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 6px;
      top: calc(50% - 6px);
      left: 6px;
      background-color: var(--color);
    }
  </style>
</div>