前言
随着前端技术的不断发展，Web 应用中的 UI 组件也越来越复杂。而通知组件是其中一个必不可少的元素，可以让用户及时了解到应用中的状态更新等信息。在本文中，我们将介绍如何利用 Custom Elements 写出一个可重用的 toast 通知组件。
Custom Elements 简介
Custom Elements 是 Web 组件标准的一部分，它使开发者可以自定义 HTML 元素，并能够以与原生 HTML 元素相同的方式使用。通过使用 Custom Elements，我们可以将组件化的思想应用到 Web 应用中，从而可以更好地维护和扩展应用代码。
确定需求
在开始编写组件前，我们需要明确具体的需求。在本文中，我们将编写一个 toast 通知组件，具有以下特点：
- 显示位置：垂直居中，水平居中。
- 显示时间：倒数自动关闭，可以手动关闭。
- 显示样式：可自定义背景颜色、字体颜色、圆角半径等样式属性。
- 其他：组件必须是可重用的，可以通过添加数据属性等方式传入不同的内容。
编写代码
定义元素
首先，我们需要定义一个元素。使用 Custom Elements 可以通过继承 HTMLElement 实现一个自定义元素，如下所示：
-- -------------------- ---- -------
----- ----- ------- ----------- -
------------- -
--------
-- --- -------
-
-- --- ------
-
---------------------------------- -------初始化组件
我们需要在构造函数中初始化组件的内容和样式。代码如下：
-- -------------------- ---- -------
------------- -
--------
--------------- - ------------------------------
------------- - ------------------------------
----------------- - ---------------------------------
------------------- - --------------
---------------------------------------- -----
------------------------------ - --------
------------------------- - ------
-------------------------- - ------
------------------------------- - ---------
------------------------------------- - -------
--------------------------- - -------
---------------------------------- - ------
----------------------------- - -------
---------------------------- - -------
------------------------------- - ---------------- -------
--------------------------- - ---------------
--------------------------- - ----
-------------------------------- - -----------
--------------------------- - ------
----------------------------- - ------
----------------------------- - -------
------------------------------ - -------
------------------------------------ - ------
--------------------------------------- - -------
----------------------------- - -------
------------------------------ - -------
------------------------------- - -------
------------------------------ - ----------
------------------------------------------- -- -- -
------------------- - --
-------------
---
-------------------------------------------
-----------------------------------------------
------------------- ----- ------ ---
----------------------------------------
-在上面的代码中，我们首先定义了一个构造函数，它将创建组件的不同元素（container、message、closeButton）。接下来，我们给这些元素应用不同的样式。例如，容器元素需要垂直和水平居中，消息元素需要显示在容器元素的内部，关闭按钮需要被定位在容器元素的右上角。
实现方法
我们需要编写以下几个方法：
open(message)：该方法用于展示组件，并显示文本消息。close()：该方法用于关闭组件。update(message, options)：该方法用于更新组件的文本消息和样式属性。
代码如下：
-- -------------------- ---- -------
------------- -
----------------------- - --------
------------------- - --------------
----------------------------- - --------
----- ----- - -------------- -- -
------------------- -- -----
-- -------------------- -- -- -
---------------------
-------------
-
-- ------
-
------- -
----------------------------- - -------
---------------------- ----------------------
-
--------------- -------- -
----------------------- - --------
------------------------------------- - ------------------------
--------------------------- - --------------
---------------------------------- - ---------------------
-在上述代码中，open() 方法用于打开组件并显示消息。该组件使用定时器在指定的时间后自动关闭，同时在显示关闭按钮的前提下，可以手动关闭。close() 方法用于关闭组件，dispatchEvent() 方法则用于发送事件，可以被外部监听。
集成到应用
在完成了组件的编写后，我们需要将其集成到应用中。以下是一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ---------------
-------
---- -
-------- -------------
-------- --- -----
------- - ----
----------------- --------
------ -----
----------- -------
------- --------
------- -----
-------------- ----
-
---------- -
----------------- --------
-
--------
-------
------
-----------------------
------- ----------- ---------------------------- ----------------
------- ----------- -------------------------- --------------
------- -----------------------
-------- ------------- -
----- ----- - ------------------------------------
--------------------------- -
---------------- ----------
------ ----------
------------- ----
---
-------------
-
-------- ----------- -
----- ----- - ------------------------------------
---------------------- -
---------------- ----------
------ ----------
------------- ------
---
-------------
-
---------
-------
-------上述示例代码中，我们创建了两个按钮，分别用于调用 showSuccess() 和 showError() 方法。在事件处理函数中，我们获取 app-toast 元素，然后调用 update() 方法更新消息文本和样式属性，然后调用 open() 方法以打开组件。
总结
在本文中，我们学习了如何使用 Custom Elements 编写一个自定义的 toast 通知组件。通过继承 HTMLElement 类并使用 customElements.define() 方法，我们可以轻松地创建一个可复用的组件，并在应用中集成。这种方法可帮助我们更好地维护和扩展应用代码，并且可以更容易地实现样式化和组件化的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d510e2b5eee0b525ceec19