# atal

**Repository Path**: wxy-code/atal

## Basic Information

- **Project Name**: atal
- **Description**: Attractive Alert (Atal) - 一个美观易用、高度可定制的 JavaScript 弹框库，提供丰富的动画图标和类 Promise 的链式调用接口。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-29
- **Last Updated**: 2026-01-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Attractive Alert (Atal)

一个美观、轻量、易用的 JavaScript 弹框库，原生实现无依赖。

## 安装使用

### CDN 快速引入

```html
<!-- unpkg -->
<script src="https://unpkg.com/atal"></script>

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/atal/dist/atal.js"></script>
```

### Git 获取

```bash
git clone https://gitee.com/wxy-code/atal.git
```

### NPM 安装

```bash
npm install atal
```

```javascript
import Atal from 'atal';
// 或
const Atal = require('atal');
```

## 快速上手

### 基础弹窗

```javascript
// 简单提示
Atal.alert('欢迎', '欢迎使用 Atal 弹框库', 'info');

// 成功提示
Atal.alert('成功', '操作已完成', 'success');

// 警告确认
Atal.alert('确认删除', '删除后无法恢复', 'warning')
    .ok(() => console.log('已删除'))
    .cancel(() => console.log('已取消'));
```

### 完整配置

```javascript
Atal.alert({
    title: '自定义标题',
    content: '支持文本、HTML或DOM节点',
    icon: 'success',          // 支持10+种图标
    timer: 3000,              // 3秒自动关闭
    html: false,              // 是否解析HTML
    animateIcon: true,        // 图标动画
    buttons: {
        confirm: '确定',      // 确认按钮
        cancel: '取消',       // 取消按钮
        custom: [             // 自定义按钮
            { text: '稍后', color: '#666' }
        ]
    }
});
```

## 图标展示

内置10+种精美动画图标：

- success - 成功（绿色）
- error - 错误（红色）
- warning - 警告（橙色）
- info - 信息（蓝色）
- question - 问题（紫色）
- heart - 爱心（粉色）
- star - 星星（黄色）
- download - 下载（蓝色）
- upload - 上传（蓝色）
- key - 钥匙（橙色）

## 高级功能

### 自定义图标颜色

```javascript
Atal.alert({
    title: '自定义颜色',
    content: '图标和按钮颜色自定义',
    icon: {
        type: 'heart',
        color: '#E91E63'  // 自定义颜色
    },
    buttons: {
        confirm: {
            text: '喜欢',
            color: '#E91E63'  // 按钮颜色同步
        }
    }
});
```

### 多个自定义按钮

```javascript
Atal.alert({
    title: '选择操作',
    content: '请选择下一步操作',
    icon: 'question',
    buttons: {
        confirm: false,  // 隐藏确认
        cancel: false,   // 隐藏取消
        custom: [
            { text: '保存草稿', color: '#FF9800' },
            { text: '预览效果', color: '#2196F3' },
            { text: '立即发布', color: '#4CAF50' }
        ]
    }
}).custom(data => {
    console.log('选择了:', data.index, data.button.text);
});
```

### HTML 内容

```javascript
Atal.alert({
    title: '富文本内容',
    content: `
        <div style="text-align: left; padding: 10px;">
            <h3>功能列表</h3>
            <ul>
                <li>✅ 美观的动画图标</li>
                <li>✅ 响应式设计</li>
                <li>✅ 多种按钮配置</li>
            </ul>
        </div>
    `,
    html: true,
    icon: 'info'
});
```

### DOM 节点内容

```javascript
const form = document.createElement('div');
form.innerHTML = \`
    <input type="email" placeholder="输入邮箱" style="width:100%;padding:8px;margin:5px 0;">
    <textarea placeholder="留言内容" rows="3" style="width:100%;padding:8px;"></textarea>
\`;

Atal.alert({
    title: '联系我们',
    content: form,
    icon: 'question'
});
```

## 链式调用

```javascript
Atal.alert('确认操作', '请仔细确认信息', 'question')
    .created(el => console.log('弹窗已创建:', el))
    .ok(() => {
        Atal.alert('操作成功', '已提交处理', 'success');
    })
    .cancel(() => {
        Atal.alert('已取消', '操作已取消', 'info');
    })
    .custom(data => {
        console.log('自定义按钮:', data.index);
    });
```

## 快捷方法

### 预设配置

```javascript
// 创建预设实例
const myAlert = Atal.at({
    icon: 'success',
    buttons: { confirm: '知道了' }
});

// 简化调用
myAlert('操作成功', '数据保存完成');
myAlert('更新提示', '版本已更新');
```

### 全局配置

```javascript
// 设置默认配置
Atal.setDefaults({
    icon: 'info',
    animateIcon: true,
    buttons: {
        confirm: '确认',
        cancel: '取消'
    }
});

// 设置默认按钮文本
Atal.setDefaultButtons('好的', '不了');

// 替换原生 alert
Atal.native(); // 之后使用 alert() 将调用 Atal
```

## 动画控制

### 关闭动画

```javascript
// 关闭图标动画
Atal.alert({
    title: '静态图标',
    content: '图标动画已关闭',
    icon: 'success',
    animateIcon: false
});

// 弹窗仍有弹性进入动画
```

### 手动关闭

```javascript
const alert = Atal.alert('处理中', '请稍候...', 'info');

// 2秒后手动关闭
setTimeout(() => {
    alert.close('ok'); // 或 'cancel', 'custom'
}, 2000);
```

## 响应式特性

- 移动端适配（90%宽度）
- 按钮自动换行
- 字体大小自适应
- 触摸友好
- 键盘导航支持

## 样式自定义

### CSS 自定义类

```javascript
Atal.alert({
    title: '深色主题',
    content: '使用自定义样式类',
    className: 'dark-theme'
});
```

```css
.dark-theme .atal-container {
    background: #2d3748;
    color: white;
}

.dark-theme .atal-title {
    color: #e2e8f0;
}

.dark-theme .atal-button {
    border-radius: 20px;
}
```

## API 参考

### Atal.alert(options)
创建弹窗，返回 Atal 实例。

**options 参数**：

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| title | string | '' | 弹窗标题 |
| content | string/Node | '' | 内容（支持HTML） |
| icon | string/object | '' | 图标类型或配置对象 |
| timer | number | null | 自动关闭时间(ms) |
| html | boolean | false | 是否解析HTML内容 |
| animateIcon | boolean | true | 是否启用图标动画 |
| allowOutsideClick | boolean | false | 是否允许点击外部关闭 |
| buttons | object | {confirm:true, cancel:false} | 按钮配置 |
| className | string | '' | 自定义CSS类名 |

### 实例方法

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

### 静态方法

- Atal.at(defaults) - 创建预设实例
- Atal.setDefaults(options) - 设置全局默认值
- Atal.setDefaultButtons(confirm, cancel) - 设置默认按钮
- Atal.native() - 替换原生alert

## 开发构建

### 项目脚本

```bash
# 开发构建
npm run build:dev    # 生成 atal.js (31KB)

# 生产构建
npm run build        # 生成 atal.min.js (21KB)

# 自动发布
npm run publish      # 构建并推送
```

### 文件大小

- 开发版本：31KB（未压缩）
- 生产版本：21KB（gzip压缩）
- 零依赖，原生实现

## 浏览器兼容

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- 现代移动浏览器

## 开源协议

MIT License © 王小玗

## 支持项目

喜欢这个项目？请给它一个 Star！

---

**最后更新**：2026年  
**体积**：21KB (压缩后) / 31KB (压缩前)  
**特点**：零依赖、原生实现、动画精美、配置灵活