如何利用 Custom Elements 写出一个 toast 通知组件

前言

随着前端技术的不断发展，Web 应用中的 UI 组件也越来越复杂。而通知组件是其中一个必不可少的元素，可以让用户及时了解到应用中的状态更新等信息。在本文中，我们将介绍如何利用 Custom Elements 写出一个可重用的 toast 通知组件。

Custom Elements 简介

Custom Elements 是 Web 组件标准的一部分，它使开发者可以自定义 HTML 元素，并能够以与原生 HTML 元素相同的方式使用。通过使用 Custom Elements，我们可以将组件化的思想应用到 Web 应用中，从而可以更好地维护和扩展应用代码。

确定需求

在开始编写组件前，我们需要明确具体的需求。在本文中，我们将编写一个 toast 通知组件，具有以下特点：

  • 显示位置：垂直居中，水平居中。
  • 显示时间：倒数自动关闭，可以手动关闭。
  • 显示样式：可自定义背景颜色、字体颜色、圆角半径等样式属性。
  • 其他：组件必须是可重用的，可以通过添加数据属性等方式传入不同的内容。

编写代码

定义元素

首先，我们需要定义一个元素。使用 Custom Elements 可以通过继承 HTMLElement 实现一个自定义元素，如下所示：

----- ----- ------- ----------- -
  ------------- -
    --------
    -- --- -------
  -

  -- --- ------
-

---------------------------------- -------

初始化组件

我们需要在构造函数中初始化组件的内容和样式。代码如下：

------------- -
  --------
  --------------- - ------------------------------
  ------------- - ------------------------------
  ----------------- - ---------------------------------
  ------------------- - --------------

  ---------------------------------------- -----
  ------------------------------ - --------
  ------------------------- - ------
  -------------------------- - ------
  ------------------------------- - ---------
  ------------------------------------- - -------
  --------------------------- - -------
  ---------------------------------- - ------
  ----------------------------- - -------
  ---------------------------- - -------
  ------------------------------- - ---------------- -------

  --------------------------- - ---------------

  --------------------------- - ----
  -------------------------------- - -----------
  --------------------------- - ------
  ----------------------------- - ------
  ----------------------------- - -------
  ------------------------------ - -------
  ------------------------------------ - ------
  --------------------------------------- - -------
  ----------------------------- - -------
  ------------------------------ - -------
  ------------------------------- - -------
  ------------------------------ - ----------

  ------------------------------------------- -- -- -
    ------------------- - --
    -------------
  ---

  -------------------------------------------
  -----------------------------------------------

  ------------------- ----- ------ ---
  ----------------------------------------
-

在上面的代码中，我们首先定义了一个构造函数，它将创建组件的不同元素（container、message、closeButton）。接下来，我们给这些元素应用不同的样式。例如，容器元素需要垂直和水平居中，消息元素需要显示在容器元素的内部，关闭按钮需要被定位在容器元素的右上角。

实现方法

我们需要编写以下几个方法：

  1. open(message)：该方法用于展示组件，并显示文本消息。
  2. close()：该方法用于关闭组件。
  3. 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

阅读全文

猜你喜欢

  • RxJS 中的 buffer 操作符使用方法

    缘起 RxJS 是一个被广泛使用的 JavaScript 函数响应式编程库。它的丰富运算符集合和高效的编程模型使得它在处理异步事件时很优秀。在 RxJS 中，buffer 操作符可以在许多场景中提供便...

    1 年前
  • Socket.io on，emit，broadcast 用法大全

    Socket.io是一个实时的、双向的数据通信协议，特别适用于开发实时web应用。在前端开发中，Socket.io是一个非常常用且强大的工具，它可以让我们实现从服务器实时接收数据，并且能够很方便的将数...

    1 年前
  • Kubernetes 如何设置 Ingress 集群 IP

    Kubernetes 是一个容器编排管理平台，它不仅能够自动化地管理和部署容器，还可以通过 Ingress 控制器将服务暴露给外部网络。Ingress 控制器为 Kubernetes 集群提供了更高级...

    1 年前
  • SSE 通信协议详解及用例演示

    什么是 SSE 通信协议 SSE（Server-Sent Events）即服务器推送事件，是一种浏览器与服务器之间的单向通信协议，用于实时地传递服务器推送的事件数据。

    1 年前
  • LESS 编译错误：变量未定义的解决方式

    LESS 编译错误：变量未定义的解决方式 LESS 是一种CSS预处理语言，它可以让我们更加优雅的书写 CSS 代码。但是在实际开发中，常常会遇到一个错误：编译时变量未定义。

    1 年前
  • Oracle 数据库性能优化——如何优化查询性能

    Oracle 是广泛使用的企业级关系型数据库管理系统。它的可靠性和性能，使得它成为企业级系统的首选。但是，随着数据量和使用量的增加，数据库性能问题也越来越突出。本文将着重讲解如何优化 Oracle 数...

    1 年前
  • 在 Express.js 中实现不同语言版本 API 的方法

    随着全球化趋势的不断加剧，多语言网站和应用越来越普及。在前端开发中，实现不同语言版本的 API 是非常重要的一步。本文将介绍基于 Express.js 实现不同语言版本 API 的方法。

    1 年前
  • Headless CMS 初探：从传统 CMS 到无头 CMS

    传统的 CMS(Content Management System) 通常将内容和展示绑定在一起，而无头 CMS(Headless CMS) 则将内容和展示解耦，使得前后端可以独立开发和部署，这种方式...

    1 年前
  • 在 PWA 中使用 Firebase Cloud Messaging 推送消息

    在今天的互联网世界中，快节奏的生活和不断创新和更新的技术要求我们更快地响应和更好地协作。 而对于 Web 应用，实现即时通知的需求是不可避免的。此时，Firebase Cloud Messaging ...

    1 年前
  • GraphQL 中的一些常见错误及解决方法

    GraphQL 简介 GraphQL 是一种用于 API 的查询语言和服务器运行时。GraphQL 是一种用于 API 的查询语言，它提供了一种更高效，更强大且更灵活的替代 REST 的架构。

    1 年前
  • Node.js 组件任务性能测评（五）—— 从 express 到 fastify

    Node.js 是一款十分流行的后端 JavaScript 运行环境，广泛应用于 Web 服务器、命令行工具、物联网等场景。Node.js 生态圈中有许多优秀的组件可以用于后端开发，如 Express...

    1 年前
  • Cypress 测试框架：使用 Cypress.json 配置选项

    Cypress 是现代化的前端测试框架，它的设计目标是提高编写、运行和调试测试的效率。Cypress 具有自己的 API 和专用的测试驱动器，可以与每个阶段的测试交互，从测试环境的搭建到结果的可视化展...

    1 年前
  • 从函数计算到 Serverless 架构：一起走过的故事

    从函数计算到 Serverless 架构：一起走过的故事 随着企业业务的数字化转型，传统的云计算架构面临着越来越多的挑战，因为它们通常需要投入大量的成本和资源来维护和管理服务器、网络、存储等基础设施，...

    1 年前
  • 使用 ES10 中的 Array.prototype.flat() 方法与 Array.prototype.flatMap() 方法进行数组操作

    在 ES10 中引入了两个新的数组方法，分别是 Array.prototype.flat() 和 Array.prototype.flatMap()。这两个方法可以让我们更方便地进行数组的操作，本文将...

    1 年前
  • 使用 ES7 中的 Array.prototype.includes 方法来替代 indexOf 方法

    使用 ES7 中的 Array.prototype.includes 方法来替代 indexOf 方法 前言 JavaScript 是一门基于原型链的语言，所以数组（Array）是一种特殊的对象（Ob...

    1 年前
  • 使用 Koa 框架开发 Restful API 的常见问题及解决方法

    Koa 是一个 Web 应用程序框架，它提供给开发者一组简洁的 API，让开发者可以使用 ES6 的异步函数编写可扩展的 web 应用程序。Koa 提供了许多有用的功能，例如中间件、错误处理、路由和模...

    1 年前
  • ECMAScript 2018 中的 Object.entries 方法实现对象转为 Map 类型

    在 ECMAScript 2018 中，Object.entries 方法是一个新增的方法，它允许将对象转换为一个包含键值对数组的数组。在前端中，我们可以使用 Object.entries 方法将对象...

    1 年前
  • 使用 MongoDB 进行全文检索的方法详解

    随着数据量的增大，传统的基于关系型数据库的全文检索已经无法满足需求。而 MongoDB 作为一款非关系型数据库，其全文检索功能得到了广泛的应用。 本文将介绍使用 MongoDB 进行全文检索的方法，包...

    1 年前
  • 解决 RESTful API 的 500 错误问题

    在使用 RESTful API 进行开发时，遇到 500 错误是比较常见的问题。这个错误表示服务器内部出错，无法处理请求。这个错误可能是由于不正确的代码逻辑，不完整的数据或错误的配置所导致的。

    1 年前
  • Sequelize 实现多租户应用的解决方案

    在互联网应用的开发中，多租户应用的需求日益增加，这是因为多租户应用可以使不同的用户在共用一套系统的基础上独立管理自己的数据和业务逻辑。本文将介绍使用 Sequelize 实现多租户应用的解决方案，并且...

    1 年前

相关推荐

    暂无文章