# g-messageBox
**Repository Path**: ujjldn/g-message-box
## Basic Information
- **Project Name**: g-messageBox
- **Description**: 一个基于 Vue 3 和 Element Plus 的可倒计时 MessageBox 组件。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-15
- **Last Updated**: 2025-07-15
## Categories & Tags
**Categories**: Uncategorized
**Tags**: Vue, Element-UI
## README
# g-messagebox
一个基于 Vue 3 和 Element Plus 的可倒计时 MessageBox 组件。
## 🚀 使用方式
### 函数式调用（推荐）
```js
import { gShowMessageBox } from 'g-messagebox'
gShowMessageBox({
title: '提示',
message: '本操作将在 %s 秒后自动执行',
duration: 5,
countdown: true,
autoResolveButton: 'confirm',
confirmButtonText: '确定',
cancelButtonText: '取消',
onConfirm: () => {
console.log('用户点击了确认')
},
onCancel: () => {
console.log('用户点击了取消或倒计时结束')
}
})
```
### 支持的参数
| 参数 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `countdown` | Boolean | `true` | 是否启用倒计时 |
| `autoResolveButton` | String | `'confirm'` | 倒计时结束后自动触发按钮（`'confirm'` / `'cancel'`） |
| `duration` | Number | `5` | 倒计时秒数 |
| `title` | String | `'提示'` | 弹窗标题 |
| `message` | String | `'本操作将在 %s 秒后自动执行'` | 显示内容，支持 `%s` 占位符表示剩余时间 |
| `type` | String | `'info'` | 消息类型（`success`, `warning`, `error`, `info`） |
| `confirmButtonText` | String | `'确认'` | 确认按钮文字 |
| `cancelButtonText` | String | `'取消'` | 取消按钮文字 |
| `showConfirmButton` | Boolean | `true` | 是否显示确认按钮 |
| `showCancelButton` | Boolean | `true` | 是否显示取消按钮 |
| `onConfirm` | Function | `() => {}` | 用户点击确认或倒计时触发确认时回调 |
| `onCancel` | Function | `() => {}` | 用户点击取消或倒计时触发取消时回调 |
## 🧩 示例代码
```js
gShowMessageBox({
title: '保存提醒',
message: '您有 %s 秒时间确认保存',
duration: 5,
countdown: true,
autoResolveButton: 'cancel',
confirmButtonText: '保存',
cancelButtonText: '取消',
onConfirm: () => {
console.log('用户点击了保存')
},
onCancel: () => {
console.log('倒计时结束或用户点击了取消')
}
})
```
## 🌐 CDN 使用方式 gShowMessageBox 或者 gShowMessage
```html
g-messagebox 示例
```
## 🛠️ 开发与构建
- 本地开发：`npm run dev`
- 生产构建：`npm run build`
- 预览生产构建：`npm run preview`
构建输出目录为 `dist/`，包含：
- `g-messagebox.umd.js` - 浏览器可用 JS 文件
- `g-messagebox.css` - 弹窗样式文件
## 📁 目录结构
```
.
├── src/
│ ├── components/
│ │ └── g-messagebox.vue
│ ├── utils/
│ │ └── useMessageBox.js
│ └── App.vue
├── dist/ # 构建输出目录
└── README.md
```
## 📝 许可证
MIT License