Attractive Alert (Atal) - 美观弹框库

原创于 2025-08-26 09:40:41 发布 · 251 阅读

1 ·

CC 4.0 BY-SA版权

(c)Copyright 版权归王小玗所有，MIT开源许可协议

文章标签：

#前端 #前端框架 #javascript #html5 #ecmascript

html 同时被 3 个专栏收录

90 篇文章

订阅专栏

javscript

81 篇文章

订阅专栏

css

68 篇文章

订阅专栏

Attractive Alert (Atal) - 美观弹框库

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

✨ 特性

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

🚀 快速开始

获取库文件

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

从Gitee仓库下载

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

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

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

<!-- 使用 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：

// 简单使用
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
}