attractive-alert/README.md

一个美观易用的弹框库，提供丰富的图标和动画效果

Attractive Alert (Atal) - 美观弹框库

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

特性

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

快速开始

获取库文件

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

1. 从Gitee仓库下载
   · 访问 Gitee仓库
   · 下载最新版本的库文件
   · 在HTML中引入本地文件：
     ```html
     <script src="path/to/atal.min.js"></script>
     ```
2. 通过CDN引入（推荐生产环境使用）
   ```html
   <!-- 使用 unpkg CDN -->
   <script src="https://unpkg.com/attractive-alert@1.0.0/atal.min.js"></script>
   
   <!-- 使用 jsDelivr CDN -->
   <script src="https://cdn.jsdelivr.net/npm/attractive-alert@1.0.0/atal.min.js"></script>
   ```

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

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

基本用法

简单提示框

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

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

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

处理用户响应

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

高级用法

自定义按钮

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

预设配置

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

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

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

替换原生alert

```javascript
// 替换原生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)：设置默认按钮文本

配置选项

默认配置

```javascript
{
  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

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