npm 包 confirmer 使用教程

阅读时长 4 分钟读完

介绍

confirmer 是一个可定制化的 JavaScript 弹窗库,可以简单和方便地实现弹窗功能,同时拥有丰富的定制化选项。

安装

可以使用 npm 进行安装:

也可以直接使用 script 标签引入:

使用

引入

使用 CommonJS 引入:

使用 ES6+ 引入:

基础用法

-- -------------------- ---- -------
-----------
  ------ -----
  -------- -----
  ------- -----
  ----------- ----
---------- -- -
  -- ---------
----------- -- -
  -- ---------
---
展开代码

定制化选项

confirmer 提供了丰富的定制化选项,可以满足更多的需求。

-- -------------------- ---- -------
-----------
  ------ -----
  -------- -----
  ------- -----
  ----------- -----
  ----------- ------
  ----------- ------
  ------- ----------
  ----------- ---------
---------- -- -
  -- ---------
----------- -- -
  -- ---------
---
展开代码

参数说明:

  • title:String 类型,标题。
  • content:String 类型,内容。
  • okText:String 类型,确认按钮的文字。
  • cancelText:String 类型,取消按钮的文字。
  • hideHeader:Boolean 类型,是否隐藏头部。
  • hideFooter:Boolean 类型,是否隐藏底部。
  • okType:String 类型,确认按钮的类型,可选值为:'default'、'primary'、'success'、'warning'、'danger'、'info'。
  • cancelType:String 类型,取消按钮的类型,可选值为:'default'、'primary'、'success'、'warning'、'danger'、'info'。

自定义按钮

-- -------------------- ---- -------
-----------
  ------ -----
  -------- -----
  -------- -
    -
      ----- -----
      ----- ----------
      ------- -- -- -
        -----------------------
      -
    --
    -
      ----- -----
      ----- ----------
      ------- -- -- -
        -----------------------
      -
    -
  -
---------- -- -
  -- ---------
----------- -- -
  -- ---------
---
展开代码

参数说明:

  • buttons:Array 类型,自定义按钮。

按钮对象包含以下属性:

  • text:String 类型,按钮文字。
  • type:String 类型,按钮类型,可选值为:'default'、'primary'、'success'、'warning'、'danger'、'info'。
  • action:Function 类型,按钮点击的回调函数。

总结

使用 confirmer 可以简单方便地实现弹窗功能,并且具有丰富的定制化选项,可以满足更多的需求。在实际开发中可以根据需求进行选择和定制。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/72038

纠错
反馈

纠错反馈