在前端开发中，有时候需要为用户提供一些弹窗提示信息，比如确认对话框、错误提示框等等。而 npm 包 blear.ui.prompt 正是为此而设计的一个解决方案。
简介
blear.ui.prompt 是一个基于 jQuery 的弹窗插件，可以用于快速创建并显示弹窗。
该插件提供了多种弹窗类型，包括确认框、提醒框、消息框、进度条等。其设计理念是简单易用，可自定义样式，支持用户交互。
安装
使用 npm 安装：
npm install blear.ui.prompt
或者使用 yarn 安装：
yarn add blear.ui.prompt
引用
在 html 文件中引入 jQuery 和 blear.ui.prompt：
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="./node_modules/blear.ui.prompt/blear.ui.prompt.js"></script>
如果需要使用自定义样式，可以在 html 文件中引入 blear.ui.prompt.css：
<link rel="stylesheet" type="text/css" href="./node_modules/blear.ui.prompt/blear.ui.prompt.css">
使用
创建确认框
-- -------------------- ---- -------
---------------------- -
------ -----
--------- -------- -------- -
-- ------- ---------- -----------------
-- ------- --- ----- -
-- ---------
- ---- -
-- ---------
-
-
---创建提醒框
BUI.Alert('请输入用户名和密码', {
title: '登录',
callback: function () {
// 处理用户点击“确定”的逻辑
}
});创建消息框
BUI.Message('操作成功', {
icon: 'success', // 消息图标（支持 success/info/warning/error/none）
time: 3000 // 显示时间（毫秒），默认为 2000
});创建进度条
-- -------------------- ---- -------
--- -------- - --------------
------ -------
-------- - -- ---------- -
---
-- ------
--- ---- - - -- - -- ---- ---- -
------------------- --- -
----------------------- --- -- --------
-- -- -- ---- -
---------------- -- -----
-
-- - - --- ---
-自定义样式
blear.ui.prompt 支持修改默认样式，可以在引入 blear.ui.prompt.css 后自定义 css 样式。
比如，以下是一个修改确认框和消息框的默认样式的示例：
-- -------------------- ---- -------
------------------- ------------------ -
-------- -----
---------------- -------
-
------------------- ------------------- -
----------- -----
-
----------------- -
------------- --------
-
----------------- --------- -
------------- --------
----------- --------
-结语
blear.ui.prompt 是一个实用的前端弹窗插件，封装了多种类型的弹窗，易于使用和扩展。通过本文，您可以快速上手使用该插件，并掌握如何自定义样式。希望本文能对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735b890c4f7277583f87