在前端开发中，表格控件是非常常见的组件之一。然而，大多数表格控件都只支持单一的输入方式，例如只能使用鼠标或只能使用键盘进行输入，这对于用户的使用体验来说并不友好。
本文将介绍如何使用 Custom Elements 构建一个支持多种输入方式的表格控件，并提供示例代码以供参考。
Custom Elements
Custom Elements 是 Web Components 规范的一部分，它允许开发者自定义 HTML 元素，并定义其行为和样式。使用 Custom Elements 可以将一些常见的组件封装成自定义元素，使其更易于使用和维护。
在本文中，我们将使用 Custom Elements 来封装一个表格控件，并添加多种输入方式的支持。
构建表格控件
首先，我们需要创建一个自定义元素来表示表格控件。以下是一个简单的示例：
-- -------------------- ---- -------
--------- --------------------
-------
-- ---- --
--------
-------
---- ---- ---
--------
-----------
--------
----- ----- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----- -------- - ------------------------------------------
----- ------- - ---------------------------------
-------------------------------------
-
-
--------------------------------- -------
---------
---------------------在上面的代码中，我们创建了一个名为 Table 的自定义元素，并在其中添加了一个 template 元素来定义表格的样式和内容。在 Table 类的构造函数中，我们使用 attachShadow 方法创建了一个 Shadow DOM，然后将 template 元素的内容复制到其中。最后，我们使用 customElements.define 方法将自定义元素注册到文档中。
现在，我们已经创建了一个基本的表格控件，接下来我们将添加多种输入方式的支持。
添加多种输入方式的支持
鼠标输入
首先，我们添加鼠标输入的支持。在表格中，鼠标输入主要用于选择单元格和拖动调整列宽。
为了支持鼠标输入，我们需要在 Table 类中添加一些事件处理方法。以下是一个示例：
-- -------------------- ---- -------
----- ----- ------- ----------- -
------------- -
--------
-- ---
------------------------
-
------------------ -
--- ---------- - ------
--- ---------------- - --
--------------------------------------------- - -- -
-- ----------------- --- ----- -
---------- - -----
---------------- - ---------------------
-
---
--------------------------------------------- - -- -
-- ------------ -
----- -- - ---------
----- ----- - --------------------
----- -------- - -----------------------------------------------------
----- -------- - ---------------- - ------- - --------------------------------
----- ----- - -------------------------- ----------------------- - ------
-------------- - ----------------
------------------ -- ---------------- - -----------------
-
---
------------------------------------------- - -- -
---------- - ------
---
-
-在上面的代码中，我们添加了三个事件处理方法：mousedown、mousemove 和 mouseup。当用户按下鼠标时，如果目标元素是 th 元素，则表示用户正在调整列宽，我们记录下当前列宽和鼠标位置。在鼠标移动时，如果用户正在调整列宽，则根据鼠标位置计算出新的列宽，并更新表头和单元格的宽度。最后，当用户释放鼠标时，我们将 isDragging 标志设置为 false。
键盘输入
除了鼠标输入，我们还需要支持键盘输入。在表格中，键盘输入主要用于导航和编辑单元格。
为了支持键盘输入，我们需要在 Table 类中添加一些键盘事件处理方法。以下是一个示例：
-- -------------------- ---- -------
----- ----- ------- ----------- -
------------- -
--------
-- ---
---------------------------
-
--------------------- -
--- ----------- - -----
------------------------------------------- - -- -
------ ------- -
---- ----------
-------------------
--------------------------
------
---- ------------
-------------------
----------------------------
------
---- ------------
-------------------
----------------------------
------
---- -------------
-------------------
-----------------------------
------
---- --------
-------------------
----------------------------
------
-
---
----------------------------------------- - -- -
-- ----------------- --- ----- -
-------------------------
-
---
------------------------------------------- - -- -
-- ----------------- --- ----- -
----------- - ---------
-
---
-------------------------------------------- - -- -
-- ----------------- --- ----- -
----------- - -----
-
---
-
------------- -
-- ---
-
--------------- -
-- ---
-
--------------- -
-- ---
-
---------------- -
-- ---
-
--------------- -
-- ---
-
-在上面的代码中，我们添加了四个键盘事件处理方法：keydown、click、focusin 和 focusout。当用户按下方向键时，我们根据当前单元格的位置计算出下一个单元格的位置，并将焦点设置到该单元格中。当用户点击单元格时，我们将焦点设置到该单元格中。当单元格获得焦点时，我们记录下当前单元格的位置。当单元格失去焦点时，我们将当前单元格的位置设置为 null。
在 _moveUp、_moveDown、_moveLeft 和 _moveRight 方法中，我们根据当前单元格的位置计算出下一个单元格的位置，并将焦点设置到该单元格中。在 _editCell 方法中，我们将单元格设置为可编辑状态，并将焦点设置到单元格中。
完整示例代码
以下是一个完整的示例代码，包括了支持鼠标输入和键盘输入的代码：
-- -------------------- ---- -------
--------- --------------------
-------
----- -
---------------- ---------
------ -----
-
---
-- -
------- --- ----- -----
-------- ----
----------- -----
-
-- -
----------------- --------
------- --------
------------ -----
-
------------------- -
-------- -----
-
--------
-------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------
--------
-----------
--------
----- ----- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----- -------- - ------------------------------------------
----- ------- - ---------------------------------
-------------------------------------
------------------------
---------------------------
-
------------------ -
--- ---------- - ------
--- ---------------- - --
--------------------------------------------- - -- -
-- ----------------- --- ----- -
---------- - -----
---------------- - ---------------------
-
---
--------------------------------------------- - -- -
-- ------------ -
----- -- - ---------
----- ----- - --------------------
----- -------- - -----------------------------------------------------
----- -------- - ---------------- - ------- - --------------------------------
----- ----- - -------------------------- ----------------------- - ------
-------------- - ----------------
------------------ -- ---------------- - -----------------
-
---
------------------------------------------- - -- -
---------- - ------
---
-
--------------------- -
--- ----------- - -----
------------------------------------------- - -- -
------ ------- -
---- ----------
-------------------
--------------------------
------
---- ------------
-------------------
----------------------------
------
---- ------------
-------------------
----------------------------
------
---- -------------
-------------------
-----------------------------
------
---- --------
-------------------
----------------------------
------
-
---
----------------------------------------- - -- -
-- ----------------- --- ----- -
-------------------------
-
---
------------------------------------------- - -- -
-- ----------------- --- ----- -
----------- - ---------
-
---
-------------------------------------------- - -- -
-- ----------------- --- ----- -
----------- - -----
-
---
-
------------- -
----- ------- - ---------------------------------------
-- --------- -
----- -------- - ---------------------------------------------------- - ------
-----------------
-
-
--------------- -
----- ------- - -----------------------------------
-- --------- -
----- -------- - ---------------------------------------------------- - ------
-----------------
-
-
--------------- -
----- -------- - ----------------------------
-- ---------- -
-----------------
-
-
---------------- -
----- -------- - ------------------------
-- ---------- -
-----------------
-
-
--------------- -
-- --------------------------------------- -
------------------------------------ ----
-------------
-
-
-
--------------------------------- -------
---------
---------------------结语
本文介绍了如何使用 Custom Elements 构建一个支持多种输入方式的表格控件，并提供了示例代码以供参考。通过使用 Custom Elements，我们可以将表格控件封装成自定义元素，使其更易于使用和维护。如果您感兴趣，可以尝试使用 Custom Elements 构建其他类型的组件，例如按钮、下拉框等。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d4dbf2a941bf7134913ee3