npm 包 @beisen-platform/platform-confirm 使用教程

阅读时长 5 分钟读完

在前端开发中,我们常常需要使用弹窗组件,用来进行某些交互操作的提示或警告。而 @beisen-platform/platform-confirm 就是一个提供了弹窗功能的 npm 包,本文将介绍如何在项目中使用这个库。

安装

使用 npm 安装:

引入

在需要使用的页面里引入 @beisen-platform/platform-confirm:

使用

基本使用

@beisen-platform/platform-confirm 的最基本用法如下:

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

其中:

  • title:弹窗标题,默认为“提示”;
  • message:弹窗内容;
  • btnText:确定按钮文本,可以自定义。

自定义按钮

@beisen-platform/platform-confirm 还支持自定义按钮,如下所示:

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

其中:

  • confirm:确定按钮相关配置,包括 textcolor
  • cancel:取消按钮相关配置,包括 textcolor

自定义样式

如果你需要对弹窗进行自定义样式,可以使用 options 属性,如下所示:

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

其中:

  • overlayClass:遮罩层样式;
  • dialogClass:弹窗容器样式;
  • btnClass:按钮样式。

Promise 的返回值

@beisen-platform/platform-confirm 返回的是一个 Promise 实例,因此可以用链式调用的方式来处理点击确定后的操作:

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

小结

本文介绍了如何使用 @beisen-platform/platform-confirm 这个弹窗组件库,在实际开发中,了解和掌握这个库的使用方法,可以让我们更快速地完成前端开发工作。最后,附上完整代码示例:

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

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

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

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

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

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/beisen-platform-platform-to-confirm