Attractive Alert (Atal) - 美观弹框库

一个美观、易用且高度可定制的弹框库，提供丰富的图标和动画效果。

特性

· 🎨 美观的UI设计和流畅的动画效果 · 🔧 高度可定制化配置 · 📱 响应式设计，适配各种设备 · ⚡ 轻量级，无依赖 · 🔌 支持Promise链式调用 · 🎯 多种预设图标和动画效果

快速开始

获取库文件

您可以通过以下方式获取Attractive Alert库：

1. 从Gitee仓库下载 · 访问 Gitee仓库 · 下载最新版本的库文件 · 在HTML中引入本地文件：

   <script src="path/to/atal.min.js"></script>

2. 通过CDN引入（推荐生产环境使用）

   <!-- 使用 unpkg CDN -->
   <script src="https://unpkg.com/[email protected]/atal.min.js"></script>
      
   <!-- 使用 jsDelivr CDN -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/atal.min.js"></script>

引入后即可使用全局对象 Atal：

// 简单使用
Atal.alert('欢迎', '欢迎使用Attractive Alert!', 'success');

基本用法

简单提示框

// 简单提示
Atal.alert('标题', '内容');

// 带图标的提示
Atal.alert('成功', '操作已成功完成!', 'success');

// 使用对象配置
Atal.alert({
  title: '提示',
  content: '这是一个提示框',
  icon: 'info'
});

处理用户响应

Atal.alert('确认操作', '您确定要执行此操作吗?', 'question')
  .ok(() => {
    console.log('用户点击了确认');
  })
  .cancel(() => {
    console.log('用户点击了取消');
  });

高级用法

自定义按钮

Atal.alert({
  title: '自定义按钮',
  content: '选择您的操作',
  icon: 'info',
  buttons: {
    confirm: '确定',
    cancel: '取消',
    custom: [
      { text: '选项一', color: '#FF9800' },
      { text: '选项二', color: '#2196F3' }
    ]
  }
}).custom((data) => {
  console.log('选择了自定义按钮:', data.index, data.button);
});

预设配置

// 创建预设配置
const myAlert = Atal.at({
  icon: 'success',
  buttons: {
    confirm: '好的',
    cancel: false
  }
});

// 使用预设
myAlert('操作成功', '您的操作已成功完成!');

// 链式创建更深层次预设
const myWarning = myAlert.at({
  icon: 'warning',
  buttons: {
    confirm: '我明白了'
  }
});

替换原生alert

// 替换原生alert函数
Atal.native();

// 现在可以使用美观的alert
alert('这是一个美观的提示框!');

API参考

Atal.alert(options)

创建并显示一个弹框。

参数：

· options：可以是对象或参数列表 · title：弹框标题 · content：弹框内容（可以是HTML字符串或DOM元素） · icon：图标类型（'success', 'error', 'warning', 'info', 'question', 'heart', 'star', 'download', 'upload', 'key'） · buttons：按钮配置 · timer：自动关闭时间（毫秒） · animateIcon：是否启用图标动画 · html：内容是否作为HTML渲染

实例方法

· .ok(callback)：确认按钮回调 · .cancel(callback)：取消按钮回调 · .custom(callback)：自定义按钮回调 · .created(callback)：弹框创建完成回调 · .close(type, value)：手动关闭弹框

静态方法

· Atal.at(defaultOptions)：创建预设配置的实例 · Atal.native()：替换原生alert函数 · Atal.setDefaults(options)：设置全局默认配置 · Atal.setDefaultButtons(confirm, cancel)：设置默认按钮文本

配置选项

默认配置

{
  title: '',
  content: '',
  icon: '',
  buttons: {
    confirm: true,
    cancel: false,
    custom: []
  },
  timer: null,
  animateIcon: true,
  html: false
}

按钮配置

按钮可以配置为：

· true：使用默认按钮 · string：自定义按钮文本 · object：{ text: '按钮文本', color: '按钮颜色' }

图标类型

Atal支持以下图标类型：

· success（成功） · error（错误） · warning（警告） · info（信息） · question（问题） · heart（心形） · star（星星） · download（下载） · upload（上传） · key（钥匙）

浏览器支持

支持所有现代浏览器，包括：

· Chrome 60+ · Firefox 55+ · Safari 12+ · Edge 79+

许可证

Attractive Alert 使用 Apache License 2.0 开源许可证。这意味着您可以：

1. 自由使用：可以自由使用、复制和分发软件
2. 修改代码：可以修改源代码以满足您的需求
3. 商业使用：可以将软件用于商业目的
4. 专利授权：获得附加的专利授权

使用条件：

· 需要保留原始版权和许可证声明 · 如果修改了文件，需要在修改的文件中添加说明 · 不能使用原始作者的名称为您的产品背书或推广

免责声明： 此软件按"原样"提供，不提供任何明示或暗示的担保，包括但不限于对适销性和特定用途适用性的暗示担保。

完整的许可证文本请参阅 Apache License 2.0。

资源

· Gitee仓库 - 获取源代码和最新版本

贡献

欢迎提交Issue和Pull Request来帮助改进这个项目。

更新日志

v1.0.0

· 初始版本发布 · 提供基本弹框功能 · 支持多种图标和动画 · 支持自定义配置和预设