# FastLayer
**Repository Path**: adilt/fast-layer
## Basic Information
- **Project Name**: FastLayer
- **Description**: FastLayer 是一个现代化的 JavaScript 弹层组件，专注于提供简单易用的 API 和丰富的功能特性。它不依赖任何第三方库，体积小巧，性能出色。无论是简单的消息提示，还是复杂的模态框，都能优雅地实现。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-09
- **Last Updated**: 2025-07-22
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# FastLayer
FastLayer 是一个轻量级的 JavaScript 弹层组件，提供了丰富的弹窗功能和表单验证能力。
## 特性
- 🚀 轻量级，无依赖
- 💫 丰富的动画效果
- 🎨 支持深色模式
- 🌐 支持 RTL 布局
- 📱 响应式设计
- ✨ 可拖拽和调整大小
- 📝 内置表单验证
## 安装
html
```html
```
## 基础使用
### 消息提示
```javascript
// 成功消息
fast.msg('操作成功', {
icon: 1,
time: 2000
});
// 错误消息（带抖动效果）
fast.msg('操作失败', {
icon: 2,
shake: true,
time: 2000
});
```
### 对话框
```javascript
// 提示框
fast.alert('这是一个提示框', {
title: '提示',
icon: 1
});
// 确认框
fast.confirm('确定要删除吗？', {
title: '确认操作',
btn: ['确定', '取消']
}, function() {
// 点击确定按钮的回调
fast.msg('已删除');
}, function() {
// 点击取消按钮的回调
fast.msg('已取消');
});
```
### 加载层
```javascript
// 简单加载
const loadIndex = fast.load();
// 自定义加载
const loadIndex = fast.load(1, {
text: '加载中...',
shade: 0.3
});
// 关闭加载层
fast.close(loadIndex);
```
## 高级功能
### 可拖拽对话框
```javascript
fast.open({
type: 1,
title: '可拖拽对话框',
content: '可通过标题栏拖动
',
area: ['500px', '300px'],
drag: true
});
```
### 可调整大小
```javascript
fast.open({
type: 1,
title: '可调整大小的对话框',
content: '可通过右下角调整大小
',
area: ['500px', '300px'],
resize: true
});
```
### 最大化/最小化
```javascript
fast.open({
type: 1,
title: '窗口操作',
content: '支持最大化/最小化
',
area: ['500px', '300px'],
maxmin: true
});
```
## 表单验证
### 基础验证
```html
```
### 验证规则
- `required`: 必填项
- `email`: 邮箱格式
- `phone`: 手机号码
- `url`: 网址
- `number`: 数字
- `integer`: 整数
- `min:数字`: 最小长度
- `max:数字`: 最大长度
- `length:数字`: 固定长度
- `between:最小,最大`: 长度范围
- `date`: 日期格式
- `idcard`: 身份证号
- `password`: 密码格式（包含大小写字母和数字，至少8位）
- `chinese`: 中文字符
- `english`: 英文字母
- `username`: 用户名格式（4-16位字母、数字、下划线）
- `zip`: 邮政编码
- `ip`: IP地址
- `confirm:字段名`: 确认密码
### 密码确认示例
```html
```
## 深色模式
添加 `dark` 类到 `body` 标签即可启用深色模式：
```html
```
## RTL 支持
添加 `dir="rtl"` 属性到 `html` 标签即可启用 RTL 模式：
```html
```
## 配置项
### 基础配置
```javascript
{
type: 0, // 弹窗类型
title: '信息', // 标题
content: '', // 内容
area: 'auto', // 宽高
offset: 'auto', // 位置
icon: -1, // 图标
btn: ['确定', '取消'], // 按钮
btnAlign: 'r', // 按钮对齐方式 l:左 r:右 c:中
closeBtn: 1, // 关闭按钮
shade: 0.3, // 遮罩透明度
shadeClose: false, // 点击遮罩关闭
time: 0, // 自动关闭时间
anim: 0, // 动画效果 0:淡入 1:缩放 2:滑动 3:翻转 4:弹跳 5:旋转
maxmin: false, // 最大化/最小化
fixed: true, // 固定定位
resize: false, // 允许调整大小
drag: false // 允许拖拽
}
```
### 动画效果
- 0: 淡入
- 1: 缩放
- 2: 滑动
- 3: 翻转
- 4: 弹跳
- 5: 旋转
## 版本信息
在控制台输入 `fast.version` 可以查看版本信息。
## 许可证
MIT
## 作者
- 作者：AdilJan
- 邮箱：1394025288@qq.com
- 网站：orhun.cn