sodialog 0.1.14 → 0.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
基于 HTML5 `dialog` 的可复用弹窗库，支持 **Modal** 与 **Offcanvas**，并通过 JavaScript 动态创建 HTML 元素。
|
|
4
4
|
|
|
5
|
+
## 目录
|
|
6
|
+
|
|
7
|
+
- [安装](#安装)
|
|
8
|
+
- [使用](#使用)
|
|
9
|
+
- [API](#api)
|
|
10
|
+
- [Toast 常见示例](#toast-常见示例)
|
|
11
|
+
- [开发](#开发)
|
|
12
|
+
- [GitHub Pages 首页](#github-pages-首页)
|
|
13
|
+
- [文档体系](#文档体系)
|
|
14
|
+
- [发布到 NPM](#发布到-npm)
|
|
15
|
+
|
|
5
16
|
## 安装
|
|
6
17
|
|
|
7
18
|
```bash
|
|
@@ -11,7 +22,7 @@ npm install sodialog
|
|
|
11
22
|
## 使用
|
|
12
23
|
|
|
13
24
|
```ts
|
|
14
|
-
import { openModal, openOffcanvas } from 'sodialog'
|
|
25
|
+
import { openModal, openOffcanvas, toast } from 'sodialog'
|
|
15
26
|
import 'sodialog/style.css'
|
|
16
27
|
|
|
17
28
|
openModal({
|
|
@@ -35,9 +46,6 @@ openOffcanvas({
|
|
|
35
46
|
content: '<p>这是 Offcanvas</p>',
|
|
36
47
|
})
|
|
37
48
|
|
|
38
|
-
// Toast
|
|
39
|
-
import { toast } from 'sodialog'
|
|
40
|
-
|
|
41
49
|
toast({
|
|
42
50
|
title: '保存成功',
|
|
43
51
|
content: '配置已更新',
|
|
@@ -184,6 +192,62 @@ openOffcanvas({ title: 'Bottom', placement: 'bottom', animation: 'zoom', content
|
|
|
184
192
|
- 可用 `SoToast.closeAll()` 清空全部 toast
|
|
185
193
|
- 便捷方法：`SoToast.success/error/info/warning`
|
|
186
194
|
|
|
195
|
+
### `duplicateStrategy` 行为说明
|
|
196
|
+
|
|
197
|
+
- `update`：更新已有同 ID toast，保留单实例
|
|
198
|
+
- `ignore`：同 ID 已存在时直接忽略
|
|
199
|
+
- `restart-timer`：更新内容并重新开始倒计时
|
|
200
|
+
- `stack`：自动生成新 ID，允许同来源消息堆叠
|
|
201
|
+
|
|
202
|
+
## Toast 常见示例
|
|
203
|
+
|
|
204
|
+
### 1) 成功提示（默认 3 秒自动消失）
|
|
205
|
+
|
|
206
|
+
```ts
|
|
207
|
+
toast({
|
|
208
|
+
title: '保存成功',
|
|
209
|
+
content: '配置已同步到服务器',
|
|
210
|
+
variant: 'success',
|
|
211
|
+
})
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
### 2) 错误提示（常驻 + 手动关闭）
|
|
215
|
+
|
|
216
|
+
```ts
|
|
217
|
+
toast({
|
|
218
|
+
title: '提交失败',
|
|
219
|
+
content: '网络连接异常，请稍后重试',
|
|
220
|
+
variant: 'danger',
|
|
221
|
+
duration: false,
|
|
222
|
+
placement: 'bottom-end',
|
|
223
|
+
})
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
### 3) 固定 ID 去重（重复触发时重置计时）
|
|
227
|
+
|
|
228
|
+
```ts
|
|
229
|
+
toast({
|
|
230
|
+
id: 'sync-job',
|
|
231
|
+
title: '同步任务',
|
|
232
|
+
content: '正在更新数据...',
|
|
233
|
+
duplicateStrategy: 'restart-timer',
|
|
234
|
+
duration: 2200,
|
|
235
|
+
})
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
### 4) 全局默认配置
|
|
239
|
+
|
|
240
|
+
```ts
|
|
241
|
+
import { SoToast } from 'sodialog'
|
|
242
|
+
|
|
243
|
+
SoToast.configure({
|
|
244
|
+
placement: 'top-end',
|
|
245
|
+
maxVisible: 4,
|
|
246
|
+
pauseOnWindowBlur: true,
|
|
247
|
+
showProgress: true,
|
|
248
|
+
})
|
|
249
|
+
```
|
|
250
|
+
|
|
187
251
|
## 开发
|
|
188
252
|
|
|
189
253
|
```bash
|