当前位置：首页 > 行业动态 > 正文

humane.js

Humane.js是轻量级JS库，替代浏览器弹窗，提升

Humane.js 是一个轻量级的 JavaScript 通知库，用于在网页或 Web 应用中显示反馈消息（如成功、错误、警告等），它提供简洁的 API，支持自定义样式、位置、动画效果，且不依赖其他第三方库，适合快速集成到项目中。

核心功能

  1. 基础通知

    • 支持 humane.log()（日志）、humane.success()（成功）、humane.error()（错误）、humane.warn()（警告）等方法。
    • 自动消失,默认持续 4 秒。

  2. 高度自定义

    • 可配置通知的位置（顶部/底部、左侧/右侧）、重力方向（上/下）、图标、主题等。
    • 支持 HTML 内容和 JS 回调函数。

  3. 多实例管理

    • 同一时间可显示多个通知,按顺序堆叠。
    • 提供 humane.clear() 方法清除所有通知。

  4. 动画效果

    内置淡入淡出动画,支持通过 CSS 自定义动画。

安装与使用

引入库

  • CDN： 
    <script src="https://unpkg.com/humane-js"></script>
  • npm： 
    npm install humane-js

    使用时导入： 

    import Humane from 'humane-js';
const humane = new Humane(); // 初始化

基础示例

// 显示成功通知
humane.success('操作成功！');
// 显示错误通知，带自定义配置
humane.error('发生错误！', { timeout: 5000, position: 'tr' });

配置选项

参数 默认值 说明
gravity 'center' 通知出现方向（'north'/'south'/'center'）
position 'br' 通知对齐位置（'tr'/'br'/'bl'/'tl'，对应右上角、左下角等）
timeout 4000 自动关闭时间（毫秒）
icon null 自定义图标（字符串或 HTML 元素）
theme null 自定义主题（CSS 类名）
addnCls null 额外 CSS 类（直接添加到通知容器）
onClose null 关闭时的回调函数

与其他库对比

特性 Humane.js toastr.js Noty.js
体积 ~1.5KB (minified) ~5KB ~10KB
依赖 无 jQuery/Zepto 无
API 复杂度 简单 中等 复杂
自定义程度 高（CSS/配置） 中等 高

常见问题与解决方案

如何修改通知的默认主题？

解答：通过全局配置或单次调用时传入 theme 参数。 

// 全局设置主题
humane.configure({ theme: 'dark-theme' });
// 单次调用时设置主题
humane.error('错误！', { theme: 'danger' });

需在 CSS 中定义对应的主题类（如 .dark-theme 或 .danger）。

如何手动关闭通知？

解答：调用 humane.clear() 可清除所有通知，或通过 onClose 回调执行特定逻辑。 

humane.log('点击关闭我！', {
  onClose: () => alert('通知已关闭')
});

相关问题与解答

问题 1：Humane.js 是否支持响应式设计？

解答：Humane.js 本身不限制宽度，但默认宽度为 300px，若需响应式，需通过 CSS 动态调整宽度或使用百分比布局。 

.humane-flatty-container {
  width: 80%; / 响应式宽度 /
}

问题 2：能否在通知中嵌入按钮或表单？

解答：可以，但需注意安全性，通过 addnCls 或 innerHTML 插入自定义内容。 

humane.log('<button onclick="alert("点击了！")">点击我</button>', {
  addnCls: 'custom-content'
});

需在 CSS 中定义 `.custom-content

0

相关文章