npm 包 @the-/ui-toast 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在现代的 Web 开发中，有很多情景需要弹出提示信息来引导用户操作。为了方便开发者快速实现这一需求，开源社区推出了很多组件库，其中一个比较流行的是 @the-/ui-toast，它不仅提供了多种样式、动画和展示方式，还支持自定义文案和操作。下面我们就来详细介绍和使用这个组件库。

安装和引入

首先，要使用 @the-/ui-toast，我们需要安装该 npm 包：

yarn add @the-/ui-toast
# 或者
npm install --save @the-/ui-toast

安装好后，我们需要在项目中引入使用，这里提供了两种方式：

方式一：使用 CDN 引入

在 HTML 文件中，可以直接使用 CDN 引入 @the-/ui-toast：

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

方式二：使用模块化引入

在 JS/TS 文件中，可以使用模块化引入：

import * as TheUiToast from '@the-/ui-toast'

由于 @the-/ui-toast 是基于 React 实现的，因此在引入时需要同时引入 react 和 react-dom：

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as TheUiToast from '@the-/ui-toast'

// 在此使用 @the-/ui-toast

使用方法

在引入 @the-/ui-toast 后，我们可以直接调用 TheUiToast.show、TheUiToast.success、TheUiToast.info、TheUiToast.warning、TheUiToast.error 等方法，分别对应了不同的类型和样式。这里以 TheUiToast.success 为例：

TheUiToast.success('提交成功！')

此时会弹出一个绿色的提示框，上面显示了 提交成功！ 文案。同时，该方法还支持传入配置项，用于更加灵活地定制弹窗样式和行为：

TheUiToast.success('提交成功！', {
  duration: 5000, // 持续 5 秒
  onClose: () => console.log('已关闭'), // 关闭时触发的回调
  onAction: () => alert('已复制到剪贴板'), // 点击操作按钮(isAction)时触发的回调
  isAction: true, // 是否显示操作按钮
  actionText: '复制', // 操作按钮文案
})

上面的代码中，除了需要展示的文案外，我们还传入了一个对象作为参数，其中：

duration：持续时间，单位为毫秒，默认为 3000；
onClose：关闭回调，当弹窗关闭时会触发该函数；
onAction：操作回调，当用户点击操作按钮时会触发该函数；
isAction：是否显示操作按钮，当为 true 时会在提示框右侧显示一个操作按钮；
actionText：操作按钮文案，当 isAction 为 true 时生效。

这样，我们就可以使用 @the-/ui-toast 来方便地实现好看且易于定制的提示弹窗了。在实际开发中，我们可以结合上述的参数来灵活地定制自己的弹窗样式和行为，提升用户体验。

示例代码

下面是一个完整的示例代码，可以直接复制到项目中使用：

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

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

总结

在本文中，我们详细介绍了 @the-/ui-toast 的使用方法和示例代码，并对其参数和配置项进行了解释。希望本文能对大家了解和使用这个组件库有所启发，以便在项目中更快、更好地实现页面提示功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5eedaee8b5cbfe1ea0610f28