前言
当你需要使用模态框作为交互方式时，何不使用已经成熟的开源组件呢？@mm2/bsmodal 是一个易用的基于 Bootstrap 风格的模态框组件，支持快速集成和自定义样式。
安装
npm install @mm2/bsmodal
使用方式
-- -------------------- ---- ------- ---- -- --------- -- --- ----- ---------------- -------------------------------------------------------------------- ---- -- ------------ -- --- ----- ---------------- -------------------------------------------------------------- ---- -- ------ - ------------ --- ------- ----------------------------------------------------------- ------- --------------------------------------------------------------------------- ---- -- --------------- --- ------- ---------------------------------------------------------------------
教程
初始化 modal
var modal = new BsModal({
title: 'Modal Title',
body: 'Modal Body'
})打开 modal
modal.open()
关闭 modal
modal.close()
监听 modal 开关事件
modal.on('open', function() {
console.log('Modal opened')
})
modal.on('close', function() {
console.log('Modal closed')
})自定义配置
更改标题
modal.setTitle('New Title')更改内容
modal.setBody('New Body')更改尺寸
modal.setSize('lg')支持的尺寸: lg、sm 和 md
更改背景样式
modal.setStyle('danger')支持的样式: warning、danger、success、info 和 primary
添加 footer 按钮
-- -------------------- ---- -------
-----------------
-
------ -----
----- ----------
-------- ---------- -
--------------- ------ ---------
-------------
-
--
-
------ ---------
----- ----------
-------- ---------- -
------------------- ------ ---------
-------------
-
-
--示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ------------
----- ---------------- --------------------------------------------------------------------
----- ---------------- ------------------------------------------------------
-------
------
---------------- ---------
------- ----------------- ---------- ---------------------------
------- -----------------------------------------------------------
------- ---------------------------------------------------------------------------
------- -------------------------------------------------------------
--------
--- ----- - --- ---------
------ ------ -------
----- ------ -----
--
------------------------------ ---------- -
------------
--
---------
-------
-------总结
通过本文，我们了解了 @mm2/bsmodal 的基本使用方法和自定义配置。相信您可以很快地在您的项目中集成模态框功能了。如果您需要更多的功能定制和样式配置，可以查看项目的官方文档，或者自行修改源代码。祝您使用愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557e381e8991b448d4f2a