# Cr_toast-消息弹窗组件
**Repository Path**: ericchenran/cr-toast
## Basic Information
- **Project Name**: Cr_toast-消息弹窗组件
- **Description**: Cr_toast-消息弹窗组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-05
- **Last Updated**: 2024-12-05
## Categories & Tags
**Categories**: Uncategorized
**Tags**: CSS, JavaScript
## README
# CRToast 消息组件说明文档
## 概述
Toast 消息组件是一个轻量级的 JavaScript 类，用于在网页上显示临时通知消息。它支持多种消息类型（成功、错误、警告、信息），允许自定义显示时间、图标等。
## 使用方法
### 1. 创建 Toast 实例
首先，你需要创建一个 Toast 实例。
```javascript
const toast = new Toast();
```
### 2. 显示消息
使用 `show` 方法显示一条消息。
```javascript
toast.show('这是一条消息');
```
### 3. 使用不同类型
Toast 支持四种消息类型：成功、错误、警告和信息。你可以使用对应的便捷方法（`success`、`error`、`warning`、`info`）来显示不同类型的消息。
```javascript
toast.success('操作成功！');
toast.error('出错了！');
toast.warning('警告信息');
toast.info('提示信息');
```
### 4. 自定义配置
你可以通过传递一个配置对象给 `show` 方法来自定义消息的显示时间、图标等。
```javascript
toast.show('自定义消息', {
type: 'success',
duration: 5000,
icon: 'ri-custom-icon'
});
```
## 配置选项
- `type` (string): Toast 类型，可选值为 `'success'`、`'error'`、`'warning'`、`'info'`。默认为 `'info'`。
- `duration` (number): 显示持续时间（毫秒）。默认为 `3000` 毫秒。
- `icon` (string): 自定义图标类名（基于 Remix Icon）。如果不指定，将使用默认图标。
## 样式
Toast 组件的样式是通过 CSS 类名来控制的。你可以根据需要自定义这些样式。
- `.toast-container`: Toast 容器类名。
- `.toast`: Toast 消息通用类名。
- `.toast-success`: 成功类型消息的类名。
- `.toast-error`: 错误类型消息的类名。
- `.toast-warning`: 警告类型消息的类名。
- `.toast-info`: 信息类型消息的类名。
- `.show`: 触发动画效果的类名。
## 动画
Toast 消息的显示和隐藏是通过添加和移除 `.show` 类名来实现的。你可以通过 CSS 过渡或动画属性来定义消息的显示和隐藏效果。
例如：
```css
.toast {
opacity: 0;
transition: opacity 0.3s;
}
.toast.show {
opacity: 1;
}
```
## 图标
Toast 组件默认使用 Remix Icon 的图标类名。你可以通过传递自定义图标类名来替换默认图标。
默认图标类名对应关系如下：
- 成功：`ri-check-line`
- 错误：`ri-error-warning-line`
- 警告：`ri-alert-line`
- 信息：`ri-information-line`
## 示例代码
```html
Toast 示例
```
希望这份说明文档能帮助你更好地理解和使用 Toast 消息组件。如果你有任何问题或建议，请随时联系我们。