前言
在前端开发中，经常需要使用弹窗来实现一些交互功能。而在实现弹窗相关功能时，我们往往会使用一些已有的库或者工具，以提高效率。本文将会介绍一款 npm 包 @shortcm/dialog，它是一个轻量级的弹窗库，提供了基本的弹窗样式和功能，适合快速实现各种弹窗需求。
安装和引入
在开始使用前，我们需要先安装和引入 @shortcm/dialog。在终端中输入以下命令可以安装这个库：
npm install @shortcm/dialog --save
安装完成后，在你需要使用弹窗的地方引入该包即可，可以使用如下方式引入：
import '@shortcm/dialog/dist/dialog.min.css' import Dialog from '@shortcm/dialog'
上面的代码中，我们先引入 dialog.min.css 样式文件，然后引入 Dialog 类库。（注意：在引入 dialog.min.css 之前要确保页面中已经引入了 fontawesome 字体文件，否则图标可能无法正常显示）
基本使用
引入后，我们就可以开始使用 Dialog 了。下面是一个简单的示例：
-- -------------------- ---- -------
----- ------ - --- --------
------ -------
-------- --------------
-------- -
-
------ -----
------- ------------------ ----------
-------- -- -- -
----------------------
-
--
-
------ -----
------- ------------------ ----- ------ -------
-------- -- -- -
----------------------
-
-
-
--
-------------上面的代码演示了如何创建一个普通的弹窗，并添加两个操作按钮。这里需要注意的是，show() 方法必须在对话框完成了初始化后才可以调用。
自定义选项
除了使用默认的选项之外，@shortcm/dialog 还提供了一些自定义选项，以满足不同场景的需求。
message
message 选项用于指定弹窗的内容。可以是纯文本或者 HTML 标记：
const dialog = new Dialog({
message: '<h3>你好，世界！</h3>'
})bodyClass
bodyClass 选项用于指定弹窗内容部分的 CSS 类名：
const dialog = new Dialog({
bodyClass: 'my_content'
})bodyStyles
bodyStyles 选项用于指定弹窗内容部分的样式。可以传入字符串或者对象：
const dialog = new Dialog({
bodyStyles: {
color: '#f00',
'font-size': '16px'
}
})buttons
buttons 选项用于指定弹窗的操作按钮。一个典型的操作按钮对象包含 label、styles 和 onClick 三个属性：
- label：按钮上的文本内容；
- styles：CSS 样式；
- onClick：点击按钮时所执行的回调函数。
-- -------------------- ---- -------
----- ------ - --- --------
-------- -
-
------ -----
------- ------------------ ----------
-------- -- -- -
----------------------
-
--
-
------ -----
------- ------------------ ----- ------ -------
-------- -- -- -
----------------------
-
-
-
--closeOnClickBackDrop
closeOnClickBackDrop 选项用于指定是否在用户点击弹窗背景时关闭弹窗。默认值为 true：
const dialog = new Dialog({
closeOnClickBackDrop: false
})closeOnEsc
closeOnEsc 选项用于指定是否在用户按下键盘上的 Esc 键时关闭弹窗。默认值为 true：
const dialog = new Dialog({
closeOnEsc: false
})closeOnNextDialog
closeOnNextDialog 选项用于指定是否在打开下一个弹窗时自动关闭当前弹窗。默认值为 true：
const dialog = new Dialog({
closeOnNextDialog: false
})closeOnClickButton
closeOnClickButton 选项用于指定是否在点击操作按钮时关闭弹窗。默认值为 true：
const dialog = new Dialog({
closeOnClickButton: false
})总结
@shortcm/dialog 是一个方便易用的弹窗库，提供了丰富的自定义选项，可以满足各种场景需要。在实际开发过程中，可以根据具体需求选择合适的选项进行使用。如果你正在寻找一个简单易用的弹窗库，不妨试试 @shortcm/dialog。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d092702382238f