在前端开发中，下拉框是一个常见的 UI 组件。然而，传统的下拉框只支持有限的级别，如果需要实现无限级别的下拉框，往往需要使用复杂的 DOM 操作和事件处理。那么有没有一种更加简洁、易于维护的方案呢？这里介绍一种使用 Custom Elements 实现无限级自定义下拉框的方法。
Custom Elements 简介
Custom Elements 是 Web Components 规范的一部分，可以让开发者定义自己的 HTML 元素。使用 Custom Elements 可以封装复杂的 UI 组件，提高代码的可复用性和可维护性。下面简要介绍一下 Custom Elements 的基本用法。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
-------- -- ---- ----- --
-- - ----------- ----- --- -----
-------------- - ------------ --------------
------------------ - --------
-
-
-- -- --------------------- ---------
----------------------------------- -----------上面的代码定义了一个名为 my-element 的自定义元素，当页面中出现 <my-element> 标签时，浏览器会自动创建一个 MyElement 实例，调用 constructor 方法中定义的 DOM 结构和样式。
在 Custom Elements 中，还可以使用 connectedCallback 方法在元素被添加到页面中时执行一些操作。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ------------ --------------
------------------ - --------
-
------------------- -
---------------------- -- --------- -- --- -------
-
-
----------------------------------- -----------实现无限级自定义下拉框
了解了 Custom Elements 的基本用法之后，我们可以开始实现无限级自定义下拉框了。首先，我们需要定义一个名为 dropdown-list 的自定义元素，用来展示下拉框列表。
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
------------------- - -----------
------------------ - -------
--------------------------------
-
------------------- -
------------------------- -- --------- -- --- -------
-
-
-------------------------------------- --------------上面的代码定义了一个名为 dropdown-list 的自定义元素，用来展示下拉框列表。在 constructor 方法中，我们设置了样式为绝对定位并隐藏元素，同时将元素添加到 document.body 中，确保可以正确显示在文档中。
接下来，我们需要在下拉框的输入框中监听 click 事件，当用户点击输入框时，展示下拉框列表。
-- -------------------- ---- -------
----- -------------- ------- ----------- -
------------- -
--------
-------------- - ------- ----------- ----------------- -----------
---------- - ----------------------------------------
------------------------------------ ----- -- -
-- ----------
---
----------------------------------------------------- -- -- -
------------------------ - ---
---
-
-
---------------------------------------- ----------------上面的代码定义了一个名为 custom-dropdown 的自定义元素，包含一个输入框和一个 dropdown-list 元素。我们在输入框的 onclick 事件中，将下拉框列表的 style.display 属性设置为 ''，即显示元素。
接下来，我们需要在下拉框列表中添加若干项，并相应地处理用户的选择。
-- -------------------- ---- -------
----- -------------- ------- ----------- -
------------- -
--------
-------------- - ------- ----------- ----------------- -----------
---------- - ----------------------------------------
------------------------------------ ----- -- -
-- ----------
----- ---- - ---------------------------
-- ------ -
----- ----- - --------------------------------
--------------------------------- - ------
------------------------ - -------
-
---
----------------------------------------------------- -- -- -
------------------------ - ---
---
-
------------- -
----- -- - -----------------------------
------------ - ----------
----------------------------- ------------
---------------------------
-
-
---------------------------------------- ----------------上面的代码中，我们添加了一个 addItem 方法，用来向下拉框列表中添加一项。在 click 事件中，我们找到了最近的 li 元素，并获取了其 data-value 属性，将这个值设置到输入框中，并隐藏下拉框列表。
目前为止，我们实现了一个基本的无限级自定义下拉框，但还不能支持无限级别。接下来，我们需要添加一些逻辑，实现支持无限级别的下拉框。
-- -------------------- ---- -------
----- -------------- ------- ----------- -
------------- -
--------
-------------- - ------- ----------- ----------------- -----------
---------- - ----------------------------------------
------------------------------------ ----- -- -
-- ----------
----- ---- - ---------------------------
-- ------ -
----- ----- - --------------------------------
--------------------------------- - ------
------------------------ - -------
----- -------- - -----------------------------------
-- ---------- -
-------------------- - ---
----- ----- - ---------------------
------------------ -- -
-------------------
---
-
-
---
----------------------------------------------------- -- -- -
------------------------ - ---
---
-
------------- -
----- -- - -----------------------------
------------ - ----------
----------------------------- ------------
-- --------------- -
-------------------------------- -------------------------------
------------ -- --- --------------------
-
---------------------------
-
-
---------------------------------------- ----------------上面的代码中，我们添加了一个 data-children 属性，在列表项中保存了当前项的子项数据。如果用户点击了带有子项数据的列表项，我们将清空当前下拉框列表的内容，并根据子项数据添加新的列表项。
现在，我们可以创建一个多级无限级下拉框了。
-- -------------------- ---- -------
-----------------------------------
--------
----- ---- - --
------ ----
----- -----
--------- --
------ ------
----- -----
--
-
------ ------
----- -----
--------- --
------ --------
----- ------
--
-
------ --------
----- -----
-
-
-
-
--
-
------ ----
----- -----
--------- --
------ ------
----- ----
--
-
------ ------
----- -----
-
-
-
--
----- -------- - ------------------------------------------
----------------- -- -
-----------------------
---
---------上面的代码中，我们定义了一个数据源 data，包含了多个层级的数据。然后，我们获取了自定义元素 custom-dropdown 的引用，并通过 addItem 方法添加了数据源中的每一项。
总结
通过本文的介绍，我们学习了如何使用 Custom Elements 实现无限级自定义下拉框。Custom Elements 简化了 UI 组件的封装过程，提高了代码的可复用性和可维护性。同时，无限级自定义下拉框也是一种常见的需求，通过本文的实现，我们也学习了如何处理多层级别的数据，并实现了与用户的交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458891d968c7c53b0ae5055