使用 Custom Elements 实现多列筛选列表-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，实现多列筛选列表是一个常见的需求。一般情况下，我们会使用一些第三方的 UI 组件库来实现这个功能，但是这些组件库往往会增加额外的代码量和依赖，而且很难满足个性化的需求。那么，有没有一种更加灵活、自由的方法来实现多列筛选列表呢？答案是肯定的，那就是使用 Custom Elements。

什么是 Custom Elements？

Custom Elements 是 Web Components 的一部分，它是一种自定义 HTML 元素的方法。通过 Custom Elements，我们可以创建出自己的 HTML 元素，这些元素可以像普通的 HTML 元素一样使用，而且还可以添加自定义的行为和样式。

使用 Custom Elements，我们可以把一些常见的 UI 组件封装成自定义元素，比如多列筛选列表、日期选择器等等。这样一来，我们就可以像使用普通的 HTML 元素一样使用这些组件，而且不需要依赖任何第三方库。

如何使用 Custom Elements 实现多列筛选列表？

下面我们就来演示如何使用 Custom Elements 实现一个简单的多列筛选列表。

首先，我们需要定义一个 Custom Element。在这个 Custom Element 中，我们会使用 Shadow DOM 来封装内部的 DOM 结构，以达到样式隔离的效果。同时，我们还需要提供一些属性和方法，来控制列表的显示和隐藏，以及向外部传递选中的值。

// javascriptcn.com 代码示例
<template id="multi-select-template">
  <style>
    /* 样式隔离 */
    :host {
      display: inline-block;
      position: relative;
    }

    .label {
      display: inline-block;
      width: 100%;
      padding: 0.5rem;
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      cursor: pointer;
    }

    .list {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 100;
      display: none;
      width: 100%;
      max-height: 10rem;
      overflow-y: auto;
      background-color: #fff;
      border: 1px solid #ccc;
    }

    .list-item {
      display: block;
      padding: 0.5rem;
      cursor: pointer;
    }

    .list-item:hover {
      background-color: #f5f5f5;
    }

    .list-item.selected {
      background-color: #007bff;
      color: #fff;
    }
  </style>
  <div class="label"></div>
  <div class="list"></div>
</template>

<script>
  class MultiSelect extends HTMLElement {
    constructor() {
      super();

      // 创建 Shadow DOM
      const shadowRoot = this.attachShadow({ mode: 'open' });

      // 获取模板
      const template = document.querySelector('#multi-select-template');

      // 克隆模板内容，并添加到 Shadow DOM 中
      const content = template.content.cloneNode(true);
      shadowRoot.appendChild(content);

      // 获取 label 和 list 元素
      this.$label = shadowRoot.querySelector('.label');
      this.$list = shadowRoot.querySelector('.list');

      // 绑定事件处理函数
      this.$label.addEventListener('click', this.toggleList.bind(this));
      this.$list.addEventListener('click', this.selectItem.bind(this));

      // 初始化属性
      this._items = [];
      this._value = [];
    }

    // 通过 items 属性设置列表项
    set items(value) {
      this._items = value;
      this.render();
    }

    // 通过 value 属性设置选中的值
    set value(value) {
      this._value = value;
      this.render();
    }

    // 获取选中的值
    get value() {
      return this._value;
    }

    // 渲染列表
    render() {
      this.$list.innerHTML = '';
      this._items.forEach(item => {
        const $item = document.createElement('div');
        $item.classList.add('list-item');
        $item.textContent = item;
        if (this._value.includes(item)) {
          $item.classList.add('selected');
        }
        this.$list.appendChild($item);
      });
    }

    // 显示或隐藏列表
    toggleList() {
      this.$list.style.display = this.$list.style.display === 'none' ? 'block' : 'none';
    }

    // 选中列表项
    selectItem(event) {
      const $item = event.target;
      const value = $item.textContent;
      if (this._value.includes(value)) {
        this._value.splice(this._value.indexOf(value), 1);
      } else {
        this._value.push(value);
      }
      this.render();
    }
  }

  customElements.define('multi-select', MultiSelect);
</script>

在上面的代码中，我们定义了一个名为 MultiSelect 的 Custom Element。这个 Custom Element 包含一个 label 元素和一个 list 元素，label 元素用于显示当前选中的值，list 元素用于显示列表项。通过 items 属性，我们可以设置列表项，通过 value 属性，我们可以设置选中的值。

在构造函数中，我们首先创建了 Shadow DOM，然后获取了模板，并将模板内容克隆到 Shadow DOM 中。接着，我们获取了 label 和 list 元素，并绑定了事件处理函数。最后，我们初始化了属性和值。

在 set items 方法中，我们首先保存了传入的值，然后使用 render 方法渲染了列表。

在 set value 方法中，我们首先保存了传入的值，然后使用 render 方法渲染了列表。

在 get value 方法中，我们返回了保存的值。

在 render 方法中，我们首先清空了 list 元素的内容，然后遍历 items 数组，创建出每个列表项，并根据 value 数组中的值来设置选中状态。最后，将列表项添加到 list 元素中。

在 toggleList 方法中，我们根据 list 元素的 display 属性来判断当前列表是否显示，然后将其显示或隐藏。

在 selectItem 方法中，我们首先获取当前选中的列表项的值，然后根据该值在 value 数组中添加或删除该值，并使用 render 方法重新渲染列表。

如何使用 MultiSelect？

下面我们就来演示如何使用 MultiSelect。

首先，我们需要在 HTML 中引入 MultiSelect。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>使用 Custom Elements 实现多列筛选列表</title>
  </head>
  <body>
    <multi-select></multi-select>
    <script src="./multi-select.js"></script>
  </body>
</html>

然后，在 JavaScript 中，我们可以获取到这个元素，并设置 items 和 value 属性。

const multiSelect = document.querySelector('multi-select');
multiSelect.items = ['选项1', '选项2', '选项3'];
multiSelect.value = ['选项1', '选项2'];

最后，我们就可以在页面上看到一个简单的多列筛选列表了。

总结

通过上面的演示，我们可以看到，使用 Custom Elements 实现多列筛选列表非常简单，而且代码量很少。通过封装自定义元素，我们可以实现更加灵活、自由的 UI 组件，同时还可以减少依赖和代码量。希望本文能够对大家学习和使用 Custom Elements 有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658700d8d2f5e1655d148207