jz-toolkit 1.1.2 → 1.1.3
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/dist/esm/generDom/index.d.ts +2 -0
- package/dist/esm/generDom/index.d.ts.map +1 -0
- package/dist/esm/generDom/index.js +1 -0
- package/dist/esm/generDom/message.d.ts +135 -0
- package/dist/esm/generDom/message.d.ts.map +1 -0
- package/dist/esm/generDom/message.js +391 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +4 -0
- package/dist/generDom/index.d.ts +2 -0
- package/dist/generDom/index.d.ts.map +1 -0
- package/dist/generDom/index.js +17 -0
- package/dist/generDom/message.d.ts +135 -0
- package/dist/generDom/message.d.ts.map +1 -0
- package/dist/generDom/message.js +394 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -3
- package/package.json +6 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/generDom/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './message';
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 消息提示类型
|
|
3
|
+
*/
|
|
4
|
+
export type MessageType = "success" | "error" | "warning" | "info" | "loading";
|
|
5
|
+
/**
|
|
6
|
+
* 图标配置
|
|
7
|
+
*/
|
|
8
|
+
export interface IconConfig {
|
|
9
|
+
success?: string;
|
|
10
|
+
error?: string;
|
|
11
|
+
warning?: string;
|
|
12
|
+
info?: string;
|
|
13
|
+
loading?: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* 消息配置选项
|
|
17
|
+
*/
|
|
18
|
+
export interface MessageOptions {
|
|
19
|
+
/** 消息内容 */
|
|
20
|
+
content: string;
|
|
21
|
+
/** 消息类型 */
|
|
22
|
+
type?: MessageType;
|
|
23
|
+
/** 显示时长(毫秒),0 表示不自动关闭 */
|
|
24
|
+
duration?: number;
|
|
25
|
+
/** 是否显示关闭按钮 */
|
|
26
|
+
closable?: boolean;
|
|
27
|
+
/** 关闭时的回调 */
|
|
28
|
+
onClose?: () => void;
|
|
29
|
+
/** 自定义类名 */
|
|
30
|
+
className?: string;
|
|
31
|
+
/**
|
|
32
|
+
* 自定义图标
|
|
33
|
+
* - 字符串:iconfont 类名(如 'icon-success')
|
|
34
|
+
* - 以 '<' 开头:自定义 HTML 字符串
|
|
35
|
+
*/
|
|
36
|
+
icon?: string;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* 全局配置
|
|
40
|
+
*/
|
|
41
|
+
interface GlobalConfig {
|
|
42
|
+
/** 默认显示时长 */
|
|
43
|
+
duration: number;
|
|
44
|
+
/** 最大显示数量 */
|
|
45
|
+
maxCount: number;
|
|
46
|
+
/** 距离顶部的位置 */
|
|
47
|
+
top: number;
|
|
48
|
+
/**
|
|
49
|
+
* iconfont 前缀类名
|
|
50
|
+
* @example 'iconfont'
|
|
51
|
+
*/
|
|
52
|
+
iconPrefix?: string;
|
|
53
|
+
/**
|
|
54
|
+
* 自定义各类型的图标
|
|
55
|
+
* @example { success: 'icon-success', error: 'icon-error' }
|
|
56
|
+
*/
|
|
57
|
+
icons?: IconConfig;
|
|
58
|
+
/**
|
|
59
|
+
* 是否使用内置 SVG 图标(默认 true)
|
|
60
|
+
* 设置为 false 后,必须配置 icons
|
|
61
|
+
*/
|
|
62
|
+
useBuiltInIcons?: boolean;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Message 消息提示
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* // 基本使用
|
|
69
|
+
* message.success('保存成功');
|
|
70
|
+
* message.error('操作失败');
|
|
71
|
+
* message.warning('请注意');
|
|
72
|
+
* message.info('这是一条提示');
|
|
73
|
+
*
|
|
74
|
+
* // 加载中
|
|
75
|
+
* const hide = message.loading('加载中...');
|
|
76
|
+
* // 完成后关闭
|
|
77
|
+
* hide();
|
|
78
|
+
*
|
|
79
|
+
* // 使用 iconfont(全局配置)
|
|
80
|
+
* message.config({
|
|
81
|
+
* iconPrefix: 'iconfont',
|
|
82
|
+
* icons: {
|
|
83
|
+
* success: 'icon-success',
|
|
84
|
+
* error: 'icon-error',
|
|
85
|
+
* warning: 'icon-warning',
|
|
86
|
+
* info: 'icon-info',
|
|
87
|
+
* loading: 'icon-loading'
|
|
88
|
+
* },
|
|
89
|
+
* useBuiltInIcons: false
|
|
90
|
+
* });
|
|
91
|
+
*
|
|
92
|
+
* // 单个消息使用自定义图标
|
|
93
|
+
* message.success({
|
|
94
|
+
* content: '保存成功',
|
|
95
|
+
* icon: 'icon-check' // iconfont 类名
|
|
96
|
+
* });
|
|
97
|
+
*
|
|
98
|
+
* // 使用自定义 HTML 图标
|
|
99
|
+
* message.info({
|
|
100
|
+
* content: '自定义图标',
|
|
101
|
+
* icon: '<img src="icon.png" width="16" />'
|
|
102
|
+
* });
|
|
103
|
+
*/
|
|
104
|
+
export declare const message: {
|
|
105
|
+
/**
|
|
106
|
+
* 成功提示
|
|
107
|
+
*/
|
|
108
|
+
success(content: string | Omit<MessageOptions, "type">): () => void;
|
|
109
|
+
/**
|
|
110
|
+
* 错误提示
|
|
111
|
+
*/
|
|
112
|
+
error(content: string | Omit<MessageOptions, "type">): () => void;
|
|
113
|
+
/**
|
|
114
|
+
* 警告提示
|
|
115
|
+
*/
|
|
116
|
+
warning(content: string | Omit<MessageOptions, "type">): () => void;
|
|
117
|
+
/**
|
|
118
|
+
* 信息提示
|
|
119
|
+
*/
|
|
120
|
+
info(content: string | Omit<MessageOptions, "type">): () => void;
|
|
121
|
+
/**
|
|
122
|
+
* 加载中提示(默认不自动关闭)
|
|
123
|
+
*/
|
|
124
|
+
loading(content: string | Omit<MessageOptions, "type">): () => void;
|
|
125
|
+
/**
|
|
126
|
+
* 全局配置
|
|
127
|
+
*/
|
|
128
|
+
config(config: Partial<GlobalConfig>): void;
|
|
129
|
+
/**
|
|
130
|
+
* 销毁所有消息
|
|
131
|
+
*/
|
|
132
|
+
destroy(): void;
|
|
133
|
+
};
|
|
134
|
+
export default message;
|
|
135
|
+
//# sourceMappingURL=message.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/generDom/message.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAE/E;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,WAAW;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW;IACX,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,UAAU,YAAY;IACpB,aAAa;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc;IACd,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA+UD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,OAAO;IAClB;;OAEG;qBACc,MAAM,GAAG,KAAK,cAAc,EAAE,MAAM,CAAC,GAAG,MAAM,IAAI;IAKnE;;OAEG;mBACY,MAAM,GAAG,KAAK,cAAc,EAAE,MAAM,CAAC,GAAG,MAAM,IAAI;IAKjE;;OAEG;qBACc,MAAM,GAAG,KAAK,cAAc,EAAE,MAAM,CAAC,GAAG,MAAM,IAAI;IAKnE;;OAEG;kBACW,MAAM,GAAG,KAAK,cAAc,EAAE,MAAM,CAAC,GAAG,MAAM,IAAI;IAKhE;;OAEG;qBACc,MAAM,GAAG,KAAK,cAAc,EAAE,MAAM,CAAC,GAAG,MAAM,IAAI;IAQnE;;OAEG;mBACY,QAAQ,YAAY,CAAC,GAAG,IAAI;IAS3C;;OAEG;eACQ,IAAI;CAKhB,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,391 @@
|
|
|
1
|
+
// 默认 SVG 图标
|
|
2
|
+
const builtInIcons = {
|
|
3
|
+
success: `<svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
|
|
4
|
+
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"/>
|
|
5
|
+
</svg>`,
|
|
6
|
+
error: `
|
|
7
|
+
<svg t="1763974245751" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2432" width="1em" height="1em"><path d="M875.086452 153.730058C676.053818-45.302575 353.260522-45.302575 154.128323 153.730058s-199.032634 521.825929 0 720.958129 521.825929 199.032634 720.958129 0 199.032634-521.825929 0-720.958129zM725.836868 725.438604c-9.757478 9.757478-25.488922 9.757478-35.246399 0L514.557604 549.405739 338.624306 725.438604c-9.757478 9.757478-25.488922 9.757478-35.2464 0s-9.757478-25.488922 0-35.2464l176.032865-176.032864-176.032865-175.933299c-9.757478-9.757478-9.757478-25.488922 0-35.246399 9.757478-9.757478 25.488922-9.757478 35.2464 0l176.032864 176.032865 176.032865-176.032865c9.757478-9.757478 25.488922-9.757478 35.246399 0 9.757478 9.757478 9.757478 25.488922 0 35.246399L549.804004 514.15934 725.836868 690.192204c9.657912 9.757478 9.657912 25.488922 0 35.2464z" fill="#F56C6C" p-id="2433"></path></svg>
|
|
8
|
+
`,
|
|
9
|
+
warning: `<svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
|
|
10
|
+
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"/>
|
|
11
|
+
</svg>`,
|
|
12
|
+
info: `
|
|
13
|
+
<svg t="1763974364216" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2596" width="1em" height="1em"><path d="M512 29.538462a482.461538 482.461538 0 1 0 482.461538 482.461538A482.461538 482.461538 0 0 0 512 29.538462z m55.138462 206.178461l-15.753847 354.461539h-78.76923l-15.753847-354.461539zM512 788.283077a68.923077 68.923077 0 1 1 68.923077-68.923077 68.923077 68.923077 0 0 1-68.923077 68.923077z" p-id="2597" fill="#cdcdcd"></path></svg>
|
|
14
|
+
`,
|
|
15
|
+
loading: `<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" class="jz-message-loading-icon">
|
|
16
|
+
<path d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0v-192a32 32 0 0 1 32-32zM196.25 196.25a32 32 0 0 1 45.25 0l135.77 135.77a32 32 0 0 1-45.25 45.25L196.25 241.5a32 32 0 0 1 0-45.25zm450.73 450.73a32 32 0 0 1 45.25 0l135.77 135.77a32 32 0 0 1-45.25 45.25l-135.77-135.77a32 32 0 0 1 0-45.25zM64 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H96a32 32 0 0 1-32-32zm640 0a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64h-192a32 32 0 0 1-32-32zM196.25 827.75a32 32 0 0 1 0-45.25l135.77-135.77a32 32 0 0 1 45.25 45.25L241.5 827.75a32 32 0 0 1-45.25 0zm450.73-450.73a32 32 0 0 1 0-45.25l135.77-135.77a32 32 0 0 1 45.25 45.25l-135.77 135.77a32 32 0 0 1-45.25 0z"/>
|
|
17
|
+
</svg>`,
|
|
18
|
+
};
|
|
19
|
+
// 类型对应的颜色
|
|
20
|
+
const colors = {
|
|
21
|
+
success: "#52c41a",
|
|
22
|
+
error: "#ff4d4f",
|
|
23
|
+
warning: "#faad14",
|
|
24
|
+
info: "#1890ff",
|
|
25
|
+
loading: "#1890ff",
|
|
26
|
+
};
|
|
27
|
+
// 样式是否已注入
|
|
28
|
+
let styleInjected = false;
|
|
29
|
+
// 消息容器
|
|
30
|
+
let messageContainer = null;
|
|
31
|
+
// 消息实例列表
|
|
32
|
+
const messageInstances = new Map();
|
|
33
|
+
// 全局配置
|
|
34
|
+
const globalConfig = {
|
|
35
|
+
duration: 3000,
|
|
36
|
+
maxCount: 5,
|
|
37
|
+
top: 20,
|
|
38
|
+
iconPrefix: undefined,
|
|
39
|
+
icons: undefined,
|
|
40
|
+
useBuiltInIcons: true,
|
|
41
|
+
};
|
|
42
|
+
// 消息计数器
|
|
43
|
+
let messageCount = 0;
|
|
44
|
+
/**
|
|
45
|
+
* 获取图标 HTML
|
|
46
|
+
*/
|
|
47
|
+
function getIconHtml(type, customIcon) {
|
|
48
|
+
// 1. 如果传入了自定义图标
|
|
49
|
+
if (customIcon) {
|
|
50
|
+
// 如果是 HTML 字符串(以 '<' 开头)
|
|
51
|
+
if (customIcon.startsWith("<")) {
|
|
52
|
+
return customIcon;
|
|
53
|
+
}
|
|
54
|
+
// 否则视为 iconfont 类名
|
|
55
|
+
const prefix = globalConfig.iconPrefix || "";
|
|
56
|
+
const classes = prefix ? `${prefix} ${customIcon}` : customIcon;
|
|
57
|
+
return `<i class="${classes}"></i>`;
|
|
58
|
+
}
|
|
59
|
+
// 2. 使用全局配置的图标
|
|
60
|
+
if (globalConfig.icons && globalConfig.icons[type]) {
|
|
61
|
+
const iconClass = globalConfig.icons[type];
|
|
62
|
+
const prefix = globalConfig.iconPrefix || "";
|
|
63
|
+
const classes = prefix ? `${prefix} ${iconClass}` : iconClass;
|
|
64
|
+
// loading 类型添加旋转动画类
|
|
65
|
+
const loadingClass = type === "loading" ? " jz-message-loading-icon" : "";
|
|
66
|
+
return `<i class="${classes}${loadingClass}"></i>`;
|
|
67
|
+
}
|
|
68
|
+
// 3. 使用内置 SVG 图标
|
|
69
|
+
if (globalConfig.useBuiltInIcons) {
|
|
70
|
+
return builtInIcons[type];
|
|
71
|
+
}
|
|
72
|
+
// 4. 没有配置图标
|
|
73
|
+
return "";
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* 注入样式
|
|
77
|
+
*/
|
|
78
|
+
function injectStyles() {
|
|
79
|
+
if (styleInjected)
|
|
80
|
+
return;
|
|
81
|
+
const style = document.createElement("style");
|
|
82
|
+
style.id = "jz-message-styles";
|
|
83
|
+
style.textContent = `
|
|
84
|
+
.jz-message-container {
|
|
85
|
+
position: fixed;
|
|
86
|
+
top: ${globalConfig.top}px;
|
|
87
|
+
left: 50%;
|
|
88
|
+
transform: translateX(-50%);
|
|
89
|
+
z-index: 9999;
|
|
90
|
+
pointer-events: none;
|
|
91
|
+
display: flex;
|
|
92
|
+
flex-direction: column;
|
|
93
|
+
align-items: center;
|
|
94
|
+
gap: 8px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.jz-message {
|
|
98
|
+
display: inline-flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
padding: 10px 16px;
|
|
101
|
+
background: #fff;
|
|
102
|
+
border-radius: 8px;
|
|
103
|
+
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
104
|
+
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
105
|
+
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
106
|
+
pointer-events: all;
|
|
107
|
+
animation: jz-message-fade-in 0.3s ease;
|
|
108
|
+
max-width: 80vw;
|
|
109
|
+
word-break: break-word;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.jz-message-icon {
|
|
113
|
+
margin-right: 8px;
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
font-size: 16px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.jz-message-icon:empty {
|
|
120
|
+
display: none;
|
|
121
|
+
margin-right: 0;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.jz-message-content {
|
|
125
|
+
font-size: 14px;
|
|
126
|
+
color: rgba(0, 0, 0, 0.88);
|
|
127
|
+
line-height: 1.5;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.jz-message-close {
|
|
131
|
+
margin-left: 8px;
|
|
132
|
+
cursor: pointer;
|
|
133
|
+
color: rgba(0, 0, 0, 0.45);
|
|
134
|
+
font-size: 12px;
|
|
135
|
+
transition: color 0.2s;
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.jz-message-close:hover {
|
|
141
|
+
color: rgba(0, 0, 0, 0.88);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.jz-message-loading-icon {
|
|
145
|
+
animation: jz-message-spin 1s linear infinite;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.jz-message-fade-out {
|
|
149
|
+
animation: jz-message-fade-out 0.3s ease forwards;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
@keyframes jz-message-fade-in {
|
|
153
|
+
from {
|
|
154
|
+
opacity: 0;
|
|
155
|
+
transform: translateY(-10px);
|
|
156
|
+
}
|
|
157
|
+
to {
|
|
158
|
+
opacity: 1;
|
|
159
|
+
transform: translateY(0);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
@keyframes jz-message-fade-out {
|
|
164
|
+
from {
|
|
165
|
+
opacity: 1;
|
|
166
|
+
transform: translateY(0);
|
|
167
|
+
}
|
|
168
|
+
to {
|
|
169
|
+
opacity: 0;
|
|
170
|
+
transform: translateY(-10px);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
@keyframes jz-message-spin {
|
|
175
|
+
from {
|
|
176
|
+
transform: rotate(0deg);
|
|
177
|
+
}
|
|
178
|
+
to {
|
|
179
|
+
transform: rotate(360deg);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
`;
|
|
183
|
+
document.head.appendChild(style);
|
|
184
|
+
styleInjected = true;
|
|
185
|
+
}
|
|
186
|
+
/**
|
|
187
|
+
* 获取或创建消息容器
|
|
188
|
+
*/
|
|
189
|
+
function getContainer() {
|
|
190
|
+
if (!messageContainer) {
|
|
191
|
+
messageContainer = document.createElement("div");
|
|
192
|
+
messageContainer.className = "jz-message-container";
|
|
193
|
+
document.body.appendChild(messageContainer);
|
|
194
|
+
}
|
|
195
|
+
return messageContainer;
|
|
196
|
+
}
|
|
197
|
+
/**
|
|
198
|
+
* 创建关闭按钮
|
|
199
|
+
*/
|
|
200
|
+
function createCloseButton(onClose) {
|
|
201
|
+
const closeBtn = document.createElement("span");
|
|
202
|
+
closeBtn.className = "jz-message-close";
|
|
203
|
+
closeBtn.innerHTML = `<svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
|
|
204
|
+
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"/>
|
|
205
|
+
</svg>`;
|
|
206
|
+
closeBtn.onclick = (e) => {
|
|
207
|
+
e.stopPropagation();
|
|
208
|
+
onClose();
|
|
209
|
+
};
|
|
210
|
+
return closeBtn;
|
|
211
|
+
}
|
|
212
|
+
/**
|
|
213
|
+
* 移除消息
|
|
214
|
+
*/
|
|
215
|
+
function removeMessage(id) {
|
|
216
|
+
const messageEl = messageInstances.get(id);
|
|
217
|
+
if (!messageEl)
|
|
218
|
+
return;
|
|
219
|
+
messageEl.classList.add("jz-message-fade-out");
|
|
220
|
+
setTimeout(() => {
|
|
221
|
+
messageEl.remove();
|
|
222
|
+
messageInstances.delete(id);
|
|
223
|
+
// 如果没有消息了,移除容器
|
|
224
|
+
if (messageInstances.size === 0 && messageContainer) {
|
|
225
|
+
messageContainer.remove();
|
|
226
|
+
messageContainer = null;
|
|
227
|
+
}
|
|
228
|
+
}, 300);
|
|
229
|
+
}
|
|
230
|
+
/**
|
|
231
|
+
* 显示消息
|
|
232
|
+
*/
|
|
233
|
+
function showMessage(options) {
|
|
234
|
+
// 检查运行环境
|
|
235
|
+
if (typeof document === "undefined") {
|
|
236
|
+
console.warn("message 只能在浏览器环境中使用");
|
|
237
|
+
return () => { };
|
|
238
|
+
}
|
|
239
|
+
injectStyles();
|
|
240
|
+
const container = getContainer();
|
|
241
|
+
const { content, type = "info", duration = globalConfig.duration, closable = false, onClose, className = "", icon, } = options;
|
|
242
|
+
// 检查最大数量
|
|
243
|
+
if (messageInstances.size >= globalConfig.maxCount) {
|
|
244
|
+
const firstKey = messageInstances.keys().next().value;
|
|
245
|
+
if (firstKey) {
|
|
246
|
+
removeMessage(firstKey);
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
const id = `jz-message-${++messageCount}`;
|
|
250
|
+
// 创建消息元素
|
|
251
|
+
const messageEl = document.createElement("div");
|
|
252
|
+
messageEl.className = `jz-message ${className}`.trim();
|
|
253
|
+
messageEl.id = id;
|
|
254
|
+
// 图标
|
|
255
|
+
const iconEl = document.createElement("span");
|
|
256
|
+
iconEl.className = "jz-message-icon";
|
|
257
|
+
iconEl.style.color = colors[type];
|
|
258
|
+
iconEl.innerHTML = getIconHtml(type, icon);
|
|
259
|
+
// 内容
|
|
260
|
+
const contentEl = document.createElement("span");
|
|
261
|
+
contentEl.className = "jz-message-content";
|
|
262
|
+
contentEl.textContent = content;
|
|
263
|
+
messageEl.appendChild(iconEl);
|
|
264
|
+
messageEl.appendChild(contentEl);
|
|
265
|
+
// 关闭按钮
|
|
266
|
+
if (closable) {
|
|
267
|
+
const closeBtn = createCloseButton(() => {
|
|
268
|
+
close();
|
|
269
|
+
});
|
|
270
|
+
messageEl.appendChild(closeBtn);
|
|
271
|
+
}
|
|
272
|
+
container.appendChild(messageEl);
|
|
273
|
+
messageInstances.set(id, messageEl);
|
|
274
|
+
// 关闭函数
|
|
275
|
+
const close = () => {
|
|
276
|
+
removeMessage(id);
|
|
277
|
+
onClose?.();
|
|
278
|
+
};
|
|
279
|
+
// 自动关闭
|
|
280
|
+
let timer = null;
|
|
281
|
+
if (duration > 0) {
|
|
282
|
+
timer = setTimeout(() => {
|
|
283
|
+
close();
|
|
284
|
+
}, duration);
|
|
285
|
+
}
|
|
286
|
+
// 返回关闭函数
|
|
287
|
+
return () => {
|
|
288
|
+
if (timer) {
|
|
289
|
+
clearTimeout(timer);
|
|
290
|
+
}
|
|
291
|
+
close();
|
|
292
|
+
};
|
|
293
|
+
}
|
|
294
|
+
/**
|
|
295
|
+
* Message 消息提示
|
|
296
|
+
*
|
|
297
|
+
* @example
|
|
298
|
+
* // 基本使用
|
|
299
|
+
* message.success('保存成功');
|
|
300
|
+
* message.error('操作失败');
|
|
301
|
+
* message.warning('请注意');
|
|
302
|
+
* message.info('这是一条提示');
|
|
303
|
+
*
|
|
304
|
+
* // 加载中
|
|
305
|
+
* const hide = message.loading('加载中...');
|
|
306
|
+
* // 完成后关闭
|
|
307
|
+
* hide();
|
|
308
|
+
*
|
|
309
|
+
* // 使用 iconfont(全局配置)
|
|
310
|
+
* message.config({
|
|
311
|
+
* iconPrefix: 'iconfont',
|
|
312
|
+
* icons: {
|
|
313
|
+
* success: 'icon-success',
|
|
314
|
+
* error: 'icon-error',
|
|
315
|
+
* warning: 'icon-warning',
|
|
316
|
+
* info: 'icon-info',
|
|
317
|
+
* loading: 'icon-loading'
|
|
318
|
+
* },
|
|
319
|
+
* useBuiltInIcons: false
|
|
320
|
+
* });
|
|
321
|
+
*
|
|
322
|
+
* // 单个消息使用自定义图标
|
|
323
|
+
* message.success({
|
|
324
|
+
* content: '保存成功',
|
|
325
|
+
* icon: 'icon-check' // iconfont 类名
|
|
326
|
+
* });
|
|
327
|
+
*
|
|
328
|
+
* // 使用自定义 HTML 图标
|
|
329
|
+
* message.info({
|
|
330
|
+
* content: '自定义图标',
|
|
331
|
+
* icon: '<img src="icon.png" width="16" />'
|
|
332
|
+
* });
|
|
333
|
+
*/
|
|
334
|
+
export const message = {
|
|
335
|
+
/**
|
|
336
|
+
* 成功提示
|
|
337
|
+
*/
|
|
338
|
+
success(content) {
|
|
339
|
+
const options = typeof content === "string" ? { content } : content;
|
|
340
|
+
return showMessage({ ...options, type: "success" });
|
|
341
|
+
},
|
|
342
|
+
/**
|
|
343
|
+
* 错误提示
|
|
344
|
+
*/
|
|
345
|
+
error(content) {
|
|
346
|
+
const options = typeof content === "string" ? { content } : content;
|
|
347
|
+
return showMessage({ ...options, type: "error" });
|
|
348
|
+
},
|
|
349
|
+
/**
|
|
350
|
+
* 警告提示
|
|
351
|
+
*/
|
|
352
|
+
warning(content) {
|
|
353
|
+
const options = typeof content === "string" ? { content } : content;
|
|
354
|
+
return showMessage({ ...options, type: "warning" });
|
|
355
|
+
},
|
|
356
|
+
/**
|
|
357
|
+
* 信息提示
|
|
358
|
+
*/
|
|
359
|
+
info(content) {
|
|
360
|
+
const options = typeof content === "string" ? { content } : content;
|
|
361
|
+
return showMessage({ ...options, type: "info" });
|
|
362
|
+
},
|
|
363
|
+
/**
|
|
364
|
+
* 加载中提示(默认不自动关闭)
|
|
365
|
+
*/
|
|
366
|
+
loading(content) {
|
|
367
|
+
const options = typeof content === "string"
|
|
368
|
+
? { content, duration: 0 }
|
|
369
|
+
: { duration: 0, ...content };
|
|
370
|
+
return showMessage({ ...options, type: "loading" });
|
|
371
|
+
},
|
|
372
|
+
/**
|
|
373
|
+
* 全局配置
|
|
374
|
+
*/
|
|
375
|
+
config(config) {
|
|
376
|
+
Object.assign(globalConfig, config);
|
|
377
|
+
// 更新容器位置
|
|
378
|
+
if (messageContainer && config.top !== undefined) {
|
|
379
|
+
messageContainer.style.top = `${config.top}px`;
|
|
380
|
+
}
|
|
381
|
+
},
|
|
382
|
+
/**
|
|
383
|
+
* 销毁所有消息
|
|
384
|
+
*/
|
|
385
|
+
destroy() {
|
|
386
|
+
messageInstances.forEach((_, id) => {
|
|
387
|
+
removeMessage(id);
|
|
388
|
+
});
|
|
389
|
+
},
|
|
390
|
+
};
|
|
391
|
+
export default message;
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export * as date from "./date";
|
|
|
13
13
|
export * as async from "./async";
|
|
14
14
|
export * as url from "./url";
|
|
15
15
|
export * as validate from "./validate";
|
|
16
|
+
export * as dom from "./generDom";
|
|
16
17
|
export { chunk, compact, filterDuplicateValues, filterArrayAttr, uniq, uniqBy, flatten, flattenDeep, groupBy, sortBy, intersection, difference, union, first, last, take, takeRight, } from "./array";
|
|
17
18
|
export { flattenTree, convertToArray } from "./mapToArray";
|
|
18
19
|
export { pick, omit, deepClone, merge, get, set, flattenObject, unflattenObject, } from "./object";
|
|
@@ -24,4 +25,5 @@ export { retry, timeout, promiseAllWithLimit, } from "./async";
|
|
|
24
25
|
export { parseQueryString, stringifyQueryString, getUrlParam, addUrlParams, } from "./url";
|
|
25
26
|
export { isEmail, isPhone, isURL, isIdCard, isNumeric, isInteger, isPositiveInteger, isEmptyValue, } from "./validate";
|
|
26
27
|
export { isString, isNumber, isBoolean, isNull, isUndefined, isNullOrUndefined, isArray, isObject, isFunction, isDate, isRegExp, isMap, isSet, isEmpty, isEmptyArray, isEmptyObject, uuid, shortId, uniqueId, } from "./utility";
|
|
28
|
+
export { message, } from "./generDom";
|
|
27
29
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,cAAc,SAAS,CAAC;AAGxB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,IAAI,MAAM,YAAY,CAAC;AACnC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,cAAc,SAAS,CAAC;AAGxB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,IAAI,MAAM,YAAY,CAAC;AACnC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,GAAG,MAAM,YAAY,CAAC;AAGlC,OAAO,EAEL,KAAK,EACL,OAAO,EACP,qBAAqB,EACrB,eAAe,EACf,IAAI,EACJ,MAAM,EACN,OAAO,EACP,WAAW,EACX,OAAO,EACP,MAAM,EACN,YAAY,EACZ,UAAU,EACV,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE3D,OAAO,EAEL,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,EACH,aAAa,EACb,eAAe,GAChB,MAAM,UAAU,CAAC;AAElB,OAAO,EAEL,UAAU,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,EACP,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,UAAU,CAAC;AAElB,OAAO,EAEL,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,GAAG,EACH,OAAO,EACP,GAAG,EACH,GAAG,GACJ,MAAM,UAAU,CAAC;AAElB,OAAO,EAEL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,YAAY,CAAC;AAEpB,OAAO,EAEL,UAAU,EACV,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,OAAO,EACP,WAAW,EACX,UAAU,EACV,aAAa,GACd,MAAM,QAAQ,CAAC;AAEhB,OAAO,EAEL,KAAK,EACL,OAAO,EACP,mBAAmB,GACpB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAEL,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,YAAY,GACb,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,YAAY,GACb,MAAM,YAAY,CAAC;AAEpB,OAAO,EAEL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,OAAO,EACP,QAAQ,EACR,UAAU,EACV,MAAM,EACN,QAAQ,EACR,KAAK,EACL,KAAK,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,MAAM,WAAW,CAAC;AACnB,OAAO,EAEL,OAAO,GACR,MAAM,YAAY,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -15,6 +15,7 @@ export * as date from "./date";
|
|
|
15
15
|
export * as async from "./async";
|
|
16
16
|
export * as url from "./url";
|
|
17
17
|
export * as validate from "./validate";
|
|
18
|
+
export * as dom from "./generDom";
|
|
18
19
|
// 直接导出常用函数
|
|
19
20
|
export {
|
|
20
21
|
// 数组
|
|
@@ -47,3 +48,6 @@ isEmail, isPhone, isURL, isIdCard, isNumeric, isInteger, isPositiveInteger, isEm
|
|
|
47
48
|
export {
|
|
48
49
|
// 工具类
|
|
49
50
|
isString, isNumber, isBoolean, isNull, isUndefined, isNullOrUndefined, isArray, isObject, isFunction, isDate, isRegExp, isMap, isSet, isEmpty, isEmptyArray, isEmptyObject, uuid, shortId, uniqueId, } from "./utility";
|
|
51
|
+
export {
|
|
52
|
+
// DOM 工具
|
|
53
|
+
message, } from "./generDom";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/generDom/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./message"), exports);
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 消息提示类型
|
|
3
|
+
*/
|
|
4
|
+
export type MessageType = "success" | "error" | "warning" | "info" | "loading";
|
|
5
|
+
/**
|
|
6
|
+
* 图标配置
|
|
7
|
+
*/
|
|
8
|
+
export interface IconConfig {
|
|
9
|
+
success?: string;
|
|
10
|
+
error?: string;
|
|
11
|
+
warning?: string;
|
|
12
|
+
info?: string;
|
|
13
|
+
loading?: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* 消息配置选项
|
|
17
|
+
*/
|
|
18
|
+
export interface MessageOptions {
|
|
19
|
+
/** 消息内容 */
|
|
20
|
+
content: string;
|
|
21
|
+
/** 消息类型 */
|
|
22
|
+
type?: MessageType;
|
|
23
|
+
/** 显示时长(毫秒),0 表示不自动关闭 */
|
|
24
|
+
duration?: number;
|
|
25
|
+
/** 是否显示关闭按钮 */
|
|
26
|
+
closable?: boolean;
|
|
27
|
+
/** 关闭时的回调 */
|
|
28
|
+
onClose?: () => void;
|
|
29
|
+
/** 自定义类名 */
|
|
30
|
+
className?: string;
|
|
31
|
+
/**
|
|
32
|
+
* 自定义图标
|
|
33
|
+
* - 字符串:iconfont 类名(如 'icon-success')
|
|
34
|
+
* - 以 '<' 开头:自定义 HTML 字符串
|
|
35
|
+
*/
|
|
36
|
+
icon?: string;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* 全局配置
|
|
40
|
+
*/
|
|
41
|
+
interface GlobalConfig {
|
|
42
|
+
/** 默认显示时长 */
|
|
43
|
+
duration: number;
|
|
44
|
+
/** 最大显示数量 */
|
|
45
|
+
maxCount: number;
|
|
46
|
+
/** 距离顶部的位置 */
|
|
47
|
+
top: number;
|
|
48
|
+
/**
|
|
49
|
+
* iconfont 前缀类名
|
|
50
|
+
* @example 'iconfont'
|
|
51
|
+
*/
|
|
52
|
+
iconPrefix?: string;
|
|
53
|
+
/**
|
|
54
|
+
* 自定义各类型的图标
|
|
55
|
+
* @example { success: 'icon-success', error: 'icon-error' }
|
|
56
|
+
*/
|
|
57
|
+
icons?: IconConfig;
|
|
58
|
+
/**
|
|
59
|
+
* 是否使用内置 SVG 图标(默认 true)
|
|
60
|
+
* 设置为 false 后,必须配置 icons
|
|
61
|
+
*/
|
|
62
|
+
useBuiltInIcons?: boolean;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Message 消息提示
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* // 基本使用
|
|
69
|
+
* message.success('保存成功');
|
|
70
|
+
* message.error('操作失败');
|
|
71
|
+
* message.warning('请注意');
|
|
72
|
+
* message.info('这是一条提示');
|
|
73
|
+
*
|
|
74
|
+
* // 加载中
|
|
75
|
+
* const hide = message.loading('加载中...');
|
|
76
|
+
* // 完成后关闭
|
|
77
|
+
* hide();
|
|
78
|
+
*
|
|
79
|
+
* // 使用 iconfont(全局配置)
|
|
80
|
+
* message.config({
|
|
81
|
+
* iconPrefix: 'iconfont',
|
|
82
|
+
* icons: {
|
|
83
|
+
* success: 'icon-success',
|
|
84
|
+
* error: 'icon-error',
|
|
85
|
+
* warning: 'icon-warning',
|
|
86
|
+
* info: 'icon-info',
|
|
87
|
+
* loading: 'icon-loading'
|
|
88
|
+
* },
|
|
89
|
+
* useBuiltInIcons: false
|
|
90
|
+
* });
|
|
91
|
+
*
|
|
92
|
+
* // 单个消息使用自定义图标
|
|
93
|
+
* message.success({
|
|
94
|
+
* content: '保存成功',
|
|
95
|
+
* icon: 'icon-check' // iconfont 类名
|
|
96
|
+
* });
|
|
97
|
+
*
|
|
98
|
+
* // 使用自定义 HTML 图标
|
|
99
|
+
* message.info({
|
|
100
|
+
* content: '自定义图标',
|
|
101
|
+
* icon: '<img src="icon.png" width="16" />'
|
|
102
|
+
* });
|
|
103
|
+
*/
|
|
104
|
+
export declare const message: {
|
|
105
|
+
/**
|
|
106
|
+
* 成功提示
|
|
107
|
+
*/
|
|
108
|
+
success(content: string | Omit<MessageOptions, "type">): () => void;
|
|
109
|
+
/**
|
|
110
|
+
* 错误提示
|
|
111
|
+
*/
|
|
112
|
+
error(content: string | Omit<MessageOptions, "type">): () => void;
|
|
113
|
+
/**
|
|
114
|
+
* 警告提示
|
|
115
|
+
*/
|
|
116
|
+
warning(content: string | Omit<MessageOptions, "type">): () => void;
|
|
117
|
+
/**
|
|
118
|
+
* 信息提示
|
|
119
|
+
*/
|
|
120
|
+
info(content: string | Omit<MessageOptions, "type">): () => void;
|
|
121
|
+
/**
|
|
122
|
+
* 加载中提示(默认不自动关闭)
|
|
123
|
+
*/
|
|
124
|
+
loading(content: string | Omit<MessageOptions, "type">): () => void;
|
|
125
|
+
/**
|
|
126
|
+
* 全局配置
|
|
127
|
+
*/
|
|
128
|
+
config(config: Partial<GlobalConfig>): void;
|
|
129
|
+
/**
|
|
130
|
+
* 销毁所有消息
|
|
131
|
+
*/
|
|
132
|
+
destroy(): void;
|
|
133
|
+
};
|
|
134
|
+
export default message;
|
|
135
|
+
//# sourceMappingURL=message.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../src/generDom/message.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAE/E;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,WAAW;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW;IACX,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,UAAU,YAAY;IACpB,aAAa;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc;IACd,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA+UD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,OAAO;IAClB;;OAEG;qBACc,MAAM,GAAG,KAAK,cAAc,EAAE,MAAM,CAAC,GAAG,MAAM,IAAI;IAKnE;;OAEG;mBACY,MAAM,GAAG,KAAK,cAAc,EAAE,MAAM,CAAC,GAAG,MAAM,IAAI;IAKjE;;OAEG;qBACc,MAAM,GAAG,KAAK,cAAc,EAAE,MAAM,CAAC,GAAG,MAAM,IAAI;IAKnE;;OAEG;kBACW,MAAM,GAAG,KAAK,cAAc,EAAE,MAAM,CAAC,GAAG,MAAM,IAAI;IAKhE;;OAEG;qBACc,MAAM,GAAG,KAAK,cAAc,EAAE,MAAM,CAAC,GAAG,MAAM,IAAI;IAQnE;;OAEG;mBACY,QAAQ,YAAY,CAAC,GAAG,IAAI;IAS3C;;OAEG;eACQ,IAAI;CAKhB,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,394 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.message = void 0;
|
|
4
|
+
// 默认 SVG 图标
|
|
5
|
+
const builtInIcons = {
|
|
6
|
+
success: `<svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
|
|
7
|
+
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"/>
|
|
8
|
+
</svg>`,
|
|
9
|
+
error: `
|
|
10
|
+
<svg t="1763974245751" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2432" width="1em" height="1em"><path d="M875.086452 153.730058C676.053818-45.302575 353.260522-45.302575 154.128323 153.730058s-199.032634 521.825929 0 720.958129 521.825929 199.032634 720.958129 0 199.032634-521.825929 0-720.958129zM725.836868 725.438604c-9.757478 9.757478-25.488922 9.757478-35.246399 0L514.557604 549.405739 338.624306 725.438604c-9.757478 9.757478-25.488922 9.757478-35.2464 0s-9.757478-25.488922 0-35.2464l176.032865-176.032864-176.032865-175.933299c-9.757478-9.757478-9.757478-25.488922 0-35.246399 9.757478-9.757478 25.488922-9.757478 35.2464 0l176.032864 176.032865 176.032865-176.032865c9.757478-9.757478 25.488922-9.757478 35.246399 0 9.757478 9.757478 9.757478 25.488922 0 35.246399L549.804004 514.15934 725.836868 690.192204c9.657912 9.757478 9.657912 25.488922 0 35.2464z" fill="#F56C6C" p-id="2433"></path></svg>
|
|
11
|
+
`,
|
|
12
|
+
warning: `<svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
|
|
13
|
+
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"/>
|
|
14
|
+
</svg>`,
|
|
15
|
+
info: `
|
|
16
|
+
<svg t="1763974364216" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2596" width="1em" height="1em"><path d="M512 29.538462a482.461538 482.461538 0 1 0 482.461538 482.461538A482.461538 482.461538 0 0 0 512 29.538462z m55.138462 206.178461l-15.753847 354.461539h-78.76923l-15.753847-354.461539zM512 788.283077a68.923077 68.923077 0 1 1 68.923077-68.923077 68.923077 68.923077 0 0 1-68.923077 68.923077z" p-id="2597" fill="#cdcdcd"></path></svg>
|
|
17
|
+
`,
|
|
18
|
+
loading: `<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" class="jz-message-loading-icon">
|
|
19
|
+
<path d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0v-192a32 32 0 0 1 32-32zM196.25 196.25a32 32 0 0 1 45.25 0l135.77 135.77a32 32 0 0 1-45.25 45.25L196.25 241.5a32 32 0 0 1 0-45.25zm450.73 450.73a32 32 0 0 1 45.25 0l135.77 135.77a32 32 0 0 1-45.25 45.25l-135.77-135.77a32 32 0 0 1 0-45.25zM64 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H96a32 32 0 0 1-32-32zm640 0a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64h-192a32 32 0 0 1-32-32zM196.25 827.75a32 32 0 0 1 0-45.25l135.77-135.77a32 32 0 0 1 45.25 45.25L241.5 827.75a32 32 0 0 1-45.25 0zm450.73-450.73a32 32 0 0 1 0-45.25l135.77-135.77a32 32 0 0 1 45.25 45.25l-135.77 135.77a32 32 0 0 1-45.25 0z"/>
|
|
20
|
+
</svg>`,
|
|
21
|
+
};
|
|
22
|
+
// 类型对应的颜色
|
|
23
|
+
const colors = {
|
|
24
|
+
success: "#52c41a",
|
|
25
|
+
error: "#ff4d4f",
|
|
26
|
+
warning: "#faad14",
|
|
27
|
+
info: "#1890ff",
|
|
28
|
+
loading: "#1890ff",
|
|
29
|
+
};
|
|
30
|
+
// 样式是否已注入
|
|
31
|
+
let styleInjected = false;
|
|
32
|
+
// 消息容器
|
|
33
|
+
let messageContainer = null;
|
|
34
|
+
// 消息实例列表
|
|
35
|
+
const messageInstances = new Map();
|
|
36
|
+
// 全局配置
|
|
37
|
+
const globalConfig = {
|
|
38
|
+
duration: 3000,
|
|
39
|
+
maxCount: 5,
|
|
40
|
+
top: 20,
|
|
41
|
+
iconPrefix: undefined,
|
|
42
|
+
icons: undefined,
|
|
43
|
+
useBuiltInIcons: true,
|
|
44
|
+
};
|
|
45
|
+
// 消息计数器
|
|
46
|
+
let messageCount = 0;
|
|
47
|
+
/**
|
|
48
|
+
* 获取图标 HTML
|
|
49
|
+
*/
|
|
50
|
+
function getIconHtml(type, customIcon) {
|
|
51
|
+
// 1. 如果传入了自定义图标
|
|
52
|
+
if (customIcon) {
|
|
53
|
+
// 如果是 HTML 字符串(以 '<' 开头)
|
|
54
|
+
if (customIcon.startsWith("<")) {
|
|
55
|
+
return customIcon;
|
|
56
|
+
}
|
|
57
|
+
// 否则视为 iconfont 类名
|
|
58
|
+
const prefix = globalConfig.iconPrefix || "";
|
|
59
|
+
const classes = prefix ? `${prefix} ${customIcon}` : customIcon;
|
|
60
|
+
return `<i class="${classes}"></i>`;
|
|
61
|
+
}
|
|
62
|
+
// 2. 使用全局配置的图标
|
|
63
|
+
if (globalConfig.icons && globalConfig.icons[type]) {
|
|
64
|
+
const iconClass = globalConfig.icons[type];
|
|
65
|
+
const prefix = globalConfig.iconPrefix || "";
|
|
66
|
+
const classes = prefix ? `${prefix} ${iconClass}` : iconClass;
|
|
67
|
+
// loading 类型添加旋转动画类
|
|
68
|
+
const loadingClass = type === "loading" ? " jz-message-loading-icon" : "";
|
|
69
|
+
return `<i class="${classes}${loadingClass}"></i>`;
|
|
70
|
+
}
|
|
71
|
+
// 3. 使用内置 SVG 图标
|
|
72
|
+
if (globalConfig.useBuiltInIcons) {
|
|
73
|
+
return builtInIcons[type];
|
|
74
|
+
}
|
|
75
|
+
// 4. 没有配置图标
|
|
76
|
+
return "";
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* 注入样式
|
|
80
|
+
*/
|
|
81
|
+
function injectStyles() {
|
|
82
|
+
if (styleInjected)
|
|
83
|
+
return;
|
|
84
|
+
const style = document.createElement("style");
|
|
85
|
+
style.id = "jz-message-styles";
|
|
86
|
+
style.textContent = `
|
|
87
|
+
.jz-message-container {
|
|
88
|
+
position: fixed;
|
|
89
|
+
top: ${globalConfig.top}px;
|
|
90
|
+
left: 50%;
|
|
91
|
+
transform: translateX(-50%);
|
|
92
|
+
z-index: 9999;
|
|
93
|
+
pointer-events: none;
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
align-items: center;
|
|
97
|
+
gap: 8px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.jz-message {
|
|
101
|
+
display: inline-flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
padding: 10px 16px;
|
|
104
|
+
background: #fff;
|
|
105
|
+
border-radius: 8px;
|
|
106
|
+
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
107
|
+
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
108
|
+
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
109
|
+
pointer-events: all;
|
|
110
|
+
animation: jz-message-fade-in 0.3s ease;
|
|
111
|
+
max-width: 80vw;
|
|
112
|
+
word-break: break-word;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.jz-message-icon {
|
|
116
|
+
margin-right: 8px;
|
|
117
|
+
display: flex;
|
|
118
|
+
align-items: center;
|
|
119
|
+
font-size: 16px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.jz-message-icon:empty {
|
|
123
|
+
display: none;
|
|
124
|
+
margin-right: 0;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.jz-message-content {
|
|
128
|
+
font-size: 14px;
|
|
129
|
+
color: rgba(0, 0, 0, 0.88);
|
|
130
|
+
line-height: 1.5;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.jz-message-close {
|
|
134
|
+
margin-left: 8px;
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
color: rgba(0, 0, 0, 0.45);
|
|
137
|
+
font-size: 12px;
|
|
138
|
+
transition: color 0.2s;
|
|
139
|
+
display: flex;
|
|
140
|
+
align-items: center;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.jz-message-close:hover {
|
|
144
|
+
color: rgba(0, 0, 0, 0.88);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.jz-message-loading-icon {
|
|
148
|
+
animation: jz-message-spin 1s linear infinite;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.jz-message-fade-out {
|
|
152
|
+
animation: jz-message-fade-out 0.3s ease forwards;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
@keyframes jz-message-fade-in {
|
|
156
|
+
from {
|
|
157
|
+
opacity: 0;
|
|
158
|
+
transform: translateY(-10px);
|
|
159
|
+
}
|
|
160
|
+
to {
|
|
161
|
+
opacity: 1;
|
|
162
|
+
transform: translateY(0);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
@keyframes jz-message-fade-out {
|
|
167
|
+
from {
|
|
168
|
+
opacity: 1;
|
|
169
|
+
transform: translateY(0);
|
|
170
|
+
}
|
|
171
|
+
to {
|
|
172
|
+
opacity: 0;
|
|
173
|
+
transform: translateY(-10px);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
@keyframes jz-message-spin {
|
|
178
|
+
from {
|
|
179
|
+
transform: rotate(0deg);
|
|
180
|
+
}
|
|
181
|
+
to {
|
|
182
|
+
transform: rotate(360deg);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
`;
|
|
186
|
+
document.head.appendChild(style);
|
|
187
|
+
styleInjected = true;
|
|
188
|
+
}
|
|
189
|
+
/**
|
|
190
|
+
* 获取或创建消息容器
|
|
191
|
+
*/
|
|
192
|
+
function getContainer() {
|
|
193
|
+
if (!messageContainer) {
|
|
194
|
+
messageContainer = document.createElement("div");
|
|
195
|
+
messageContainer.className = "jz-message-container";
|
|
196
|
+
document.body.appendChild(messageContainer);
|
|
197
|
+
}
|
|
198
|
+
return messageContainer;
|
|
199
|
+
}
|
|
200
|
+
/**
|
|
201
|
+
* 创建关闭按钮
|
|
202
|
+
*/
|
|
203
|
+
function createCloseButton(onClose) {
|
|
204
|
+
const closeBtn = document.createElement("span");
|
|
205
|
+
closeBtn.className = "jz-message-close";
|
|
206
|
+
closeBtn.innerHTML = `<svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
|
|
207
|
+
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"/>
|
|
208
|
+
</svg>`;
|
|
209
|
+
closeBtn.onclick = (e) => {
|
|
210
|
+
e.stopPropagation();
|
|
211
|
+
onClose();
|
|
212
|
+
};
|
|
213
|
+
return closeBtn;
|
|
214
|
+
}
|
|
215
|
+
/**
|
|
216
|
+
* 移除消息
|
|
217
|
+
*/
|
|
218
|
+
function removeMessage(id) {
|
|
219
|
+
const messageEl = messageInstances.get(id);
|
|
220
|
+
if (!messageEl)
|
|
221
|
+
return;
|
|
222
|
+
messageEl.classList.add("jz-message-fade-out");
|
|
223
|
+
setTimeout(() => {
|
|
224
|
+
messageEl.remove();
|
|
225
|
+
messageInstances.delete(id);
|
|
226
|
+
// 如果没有消息了,移除容器
|
|
227
|
+
if (messageInstances.size === 0 && messageContainer) {
|
|
228
|
+
messageContainer.remove();
|
|
229
|
+
messageContainer = null;
|
|
230
|
+
}
|
|
231
|
+
}, 300);
|
|
232
|
+
}
|
|
233
|
+
/**
|
|
234
|
+
* 显示消息
|
|
235
|
+
*/
|
|
236
|
+
function showMessage(options) {
|
|
237
|
+
// 检查运行环境
|
|
238
|
+
if (typeof document === "undefined") {
|
|
239
|
+
console.warn("message 只能在浏览器环境中使用");
|
|
240
|
+
return () => { };
|
|
241
|
+
}
|
|
242
|
+
injectStyles();
|
|
243
|
+
const container = getContainer();
|
|
244
|
+
const { content, type = "info", duration = globalConfig.duration, closable = false, onClose, className = "", icon, } = options;
|
|
245
|
+
// 检查最大数量
|
|
246
|
+
if (messageInstances.size >= globalConfig.maxCount) {
|
|
247
|
+
const firstKey = messageInstances.keys().next().value;
|
|
248
|
+
if (firstKey) {
|
|
249
|
+
removeMessage(firstKey);
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
const id = `jz-message-${++messageCount}`;
|
|
253
|
+
// 创建消息元素
|
|
254
|
+
const messageEl = document.createElement("div");
|
|
255
|
+
messageEl.className = `jz-message ${className}`.trim();
|
|
256
|
+
messageEl.id = id;
|
|
257
|
+
// 图标
|
|
258
|
+
const iconEl = document.createElement("span");
|
|
259
|
+
iconEl.className = "jz-message-icon";
|
|
260
|
+
iconEl.style.color = colors[type];
|
|
261
|
+
iconEl.innerHTML = getIconHtml(type, icon);
|
|
262
|
+
// 内容
|
|
263
|
+
const contentEl = document.createElement("span");
|
|
264
|
+
contentEl.className = "jz-message-content";
|
|
265
|
+
contentEl.textContent = content;
|
|
266
|
+
messageEl.appendChild(iconEl);
|
|
267
|
+
messageEl.appendChild(contentEl);
|
|
268
|
+
// 关闭按钮
|
|
269
|
+
if (closable) {
|
|
270
|
+
const closeBtn = createCloseButton(() => {
|
|
271
|
+
close();
|
|
272
|
+
});
|
|
273
|
+
messageEl.appendChild(closeBtn);
|
|
274
|
+
}
|
|
275
|
+
container.appendChild(messageEl);
|
|
276
|
+
messageInstances.set(id, messageEl);
|
|
277
|
+
// 关闭函数
|
|
278
|
+
const close = () => {
|
|
279
|
+
removeMessage(id);
|
|
280
|
+
onClose?.();
|
|
281
|
+
};
|
|
282
|
+
// 自动关闭
|
|
283
|
+
let timer = null;
|
|
284
|
+
if (duration > 0) {
|
|
285
|
+
timer = setTimeout(() => {
|
|
286
|
+
close();
|
|
287
|
+
}, duration);
|
|
288
|
+
}
|
|
289
|
+
// 返回关闭函数
|
|
290
|
+
return () => {
|
|
291
|
+
if (timer) {
|
|
292
|
+
clearTimeout(timer);
|
|
293
|
+
}
|
|
294
|
+
close();
|
|
295
|
+
};
|
|
296
|
+
}
|
|
297
|
+
/**
|
|
298
|
+
* Message 消息提示
|
|
299
|
+
*
|
|
300
|
+
* @example
|
|
301
|
+
* // 基本使用
|
|
302
|
+
* message.success('保存成功');
|
|
303
|
+
* message.error('操作失败');
|
|
304
|
+
* message.warning('请注意');
|
|
305
|
+
* message.info('这是一条提示');
|
|
306
|
+
*
|
|
307
|
+
* // 加载中
|
|
308
|
+
* const hide = message.loading('加载中...');
|
|
309
|
+
* // 完成后关闭
|
|
310
|
+
* hide();
|
|
311
|
+
*
|
|
312
|
+
* // 使用 iconfont(全局配置)
|
|
313
|
+
* message.config({
|
|
314
|
+
* iconPrefix: 'iconfont',
|
|
315
|
+
* icons: {
|
|
316
|
+
* success: 'icon-success',
|
|
317
|
+
* error: 'icon-error',
|
|
318
|
+
* warning: 'icon-warning',
|
|
319
|
+
* info: 'icon-info',
|
|
320
|
+
* loading: 'icon-loading'
|
|
321
|
+
* },
|
|
322
|
+
* useBuiltInIcons: false
|
|
323
|
+
* });
|
|
324
|
+
*
|
|
325
|
+
* // 单个消息使用自定义图标
|
|
326
|
+
* message.success({
|
|
327
|
+
* content: '保存成功',
|
|
328
|
+
* icon: 'icon-check' // iconfont 类名
|
|
329
|
+
* });
|
|
330
|
+
*
|
|
331
|
+
* // 使用自定义 HTML 图标
|
|
332
|
+
* message.info({
|
|
333
|
+
* content: '自定义图标',
|
|
334
|
+
* icon: '<img src="icon.png" width="16" />'
|
|
335
|
+
* });
|
|
336
|
+
*/
|
|
337
|
+
exports.message = {
|
|
338
|
+
/**
|
|
339
|
+
* 成功提示
|
|
340
|
+
*/
|
|
341
|
+
success(content) {
|
|
342
|
+
const options = typeof content === "string" ? { content } : content;
|
|
343
|
+
return showMessage({ ...options, type: "success" });
|
|
344
|
+
},
|
|
345
|
+
/**
|
|
346
|
+
* 错误提示
|
|
347
|
+
*/
|
|
348
|
+
error(content) {
|
|
349
|
+
const options = typeof content === "string" ? { content } : content;
|
|
350
|
+
return showMessage({ ...options, type: "error" });
|
|
351
|
+
},
|
|
352
|
+
/**
|
|
353
|
+
* 警告提示
|
|
354
|
+
*/
|
|
355
|
+
warning(content) {
|
|
356
|
+
const options = typeof content === "string" ? { content } : content;
|
|
357
|
+
return showMessage({ ...options, type: "warning" });
|
|
358
|
+
},
|
|
359
|
+
/**
|
|
360
|
+
* 信息提示
|
|
361
|
+
*/
|
|
362
|
+
info(content) {
|
|
363
|
+
const options = typeof content === "string" ? { content } : content;
|
|
364
|
+
return showMessage({ ...options, type: "info" });
|
|
365
|
+
},
|
|
366
|
+
/**
|
|
367
|
+
* 加载中提示(默认不自动关闭)
|
|
368
|
+
*/
|
|
369
|
+
loading(content) {
|
|
370
|
+
const options = typeof content === "string"
|
|
371
|
+
? { content, duration: 0 }
|
|
372
|
+
: { duration: 0, ...content };
|
|
373
|
+
return showMessage({ ...options, type: "loading" });
|
|
374
|
+
},
|
|
375
|
+
/**
|
|
376
|
+
* 全局配置
|
|
377
|
+
*/
|
|
378
|
+
config(config) {
|
|
379
|
+
Object.assign(globalConfig, config);
|
|
380
|
+
// 更新容器位置
|
|
381
|
+
if (messageContainer && config.top !== undefined) {
|
|
382
|
+
messageContainer.style.top = `${config.top}px`;
|
|
383
|
+
}
|
|
384
|
+
},
|
|
385
|
+
/**
|
|
386
|
+
* 销毁所有消息
|
|
387
|
+
*/
|
|
388
|
+
destroy() {
|
|
389
|
+
messageInstances.forEach((_, id) => {
|
|
390
|
+
removeMessage(id);
|
|
391
|
+
});
|
|
392
|
+
},
|
|
393
|
+
};
|
|
394
|
+
exports.default = exports.message;
|
package/dist/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export * as date from "./date";
|
|
|
13
13
|
export * as async from "./async";
|
|
14
14
|
export * as url from "./url";
|
|
15
15
|
export * as validate from "./validate";
|
|
16
|
+
export * as dom from "./generDom";
|
|
16
17
|
export { chunk, compact, filterDuplicateValues, filterArrayAttr, uniq, uniqBy, flatten, flattenDeep, groupBy, sortBy, intersection, difference, union, first, last, take, takeRight, } from "./array";
|
|
17
18
|
export { flattenTree, convertToArray } from "./mapToArray";
|
|
18
19
|
export { pick, omit, deepClone, merge, get, set, flattenObject, unflattenObject, } from "./object";
|
|
@@ -24,4 +25,5 @@ export { retry, timeout, promiseAllWithLimit, } from "./async";
|
|
|
24
25
|
export { parseQueryString, stringifyQueryString, getUrlParam, addUrlParams, } from "./url";
|
|
25
26
|
export { isEmail, isPhone, isURL, isIdCard, isNumeric, isInteger, isPositiveInteger, isEmptyValue, } from "./validate";
|
|
26
27
|
export { isString, isNumber, isBoolean, isNull, isUndefined, isNullOrUndefined, isArray, isObject, isFunction, isDate, isRegExp, isMap, isSet, isEmpty, isEmptyArray, isEmptyObject, uuid, shortId, uniqueId, } from "./utility";
|
|
28
|
+
export { message, } from "./generDom";
|
|
27
29
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,cAAc,SAAS,CAAC;AAGxB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,IAAI,MAAM,YAAY,CAAC;AACnC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,cAAc,SAAS,CAAC;AAGxB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,IAAI,MAAM,YAAY,CAAC;AACnC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,GAAG,MAAM,YAAY,CAAC;AAGlC,OAAO,EAEL,KAAK,EACL,OAAO,EACP,qBAAqB,EACrB,eAAe,EACf,IAAI,EACJ,MAAM,EACN,OAAO,EACP,WAAW,EACX,OAAO,EACP,MAAM,EACN,YAAY,EACZ,UAAU,EACV,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE3D,OAAO,EAEL,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,EACH,aAAa,EACb,eAAe,GAChB,MAAM,UAAU,CAAC;AAElB,OAAO,EAEL,UAAU,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,EACP,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,UAAU,CAAC;AAElB,OAAO,EAEL,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,GAAG,EACH,OAAO,EACP,GAAG,EACH,GAAG,GACJ,MAAM,UAAU,CAAC;AAElB,OAAO,EAEL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,YAAY,CAAC;AAEpB,OAAO,EAEL,UAAU,EACV,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,OAAO,EACP,WAAW,EACX,UAAU,EACV,aAAa,GACd,MAAM,QAAQ,CAAC;AAEhB,OAAO,EAEL,KAAK,EACL,OAAO,EACP,mBAAmB,GACpB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAEL,gBAAgB,EAChB,oBAAoB,EACpB,WAAW,EACX,YAAY,GACb,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,YAAY,GACb,MAAM,YAAY,CAAC;AAEpB,OAAO,EAEL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,OAAO,EACP,QAAQ,EACR,UAAU,EACV,MAAM,EACN,QAAQ,EACR,KAAK,EACL,KAAK,EACL,OAAO,EACP,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,MAAM,WAAW,CAAC;AACnB,OAAO,EAEL,OAAO,GACR,MAAM,YAAY,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -29,9 +29,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
29
29
|
return result;
|
|
30
30
|
};
|
|
31
31
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
|
-
exports.
|
|
33
|
-
exports.
|
|
34
|
-
exports.uniqueId = exports.shortId = exports.uuid = exports.isEmptyObject = exports.isEmptyArray = exports.isEmpty = exports.isSet = exports.isMap = exports.isRegExp = exports.isDate = exports.isFunction = exports.isObject = void 0;
|
|
32
|
+
exports.randomNumericString = exports.randomString = exports.trimEnd = exports.trimStart = exports.trim = exports.truncate = exports.pascalCase = exports.snakeCase = exports.kebabCase = exports.camelCase = exports.capitalize = exports.unflattenObject = exports.flattenObject = exports.set = exports.get = exports.merge = exports.deepClone = exports.omit = exports.pick = exports.convertToArray = exports.flattenTree = exports.takeRight = exports.take = exports.last = exports.first = exports.union = exports.difference = exports.intersection = exports.sortBy = exports.groupBy = exports.flattenDeep = exports.flatten = exports.uniqBy = exports.uniq = exports.filterArrayAttr = exports.filterDuplicateValues = exports.compact = exports.chunk = exports.dom = exports.validate = exports.url = exports.async = exports.date = exports.func = exports.mapToArray = exports.number = exports.utility = exports.string = exports.object = exports.array = void 0;
|
|
33
|
+
exports.isNullOrUndefined = exports.isUndefined = exports.isNull = exports.isBoolean = exports.isNumber = exports.isString = exports.isEmptyValue = exports.isPositiveInteger = exports.isInteger = exports.isNumeric = exports.isIdCard = exports.isURL = exports.isPhone = exports.isEmail = exports.addUrlParams = exports.getUrlParam = exports.stringifyQueryString = exports.parseQueryString = exports.promiseAllWithLimit = exports.timeout = exports.retry = exports.isDateInRange = exports.isTomorrow = exports.isYesterday = exports.isToday = exports.isSameDay = exports.isValidDate = exports.diffMinutes = exports.diffHours = exports.diffDays = exports.addYears = exports.addMonths = exports.addDays = exports.formatDate = exports.delay = exports.sleep = exports.once = exports.throttle = exports.debounce = exports.min = exports.max = exports.average = exports.sum = exports.formatNumber = exports.inRange = exports.clamp = exports.randomInt = exports.random = exports.numberToFixed = exports.randomAlphaString = void 0;
|
|
34
|
+
exports.message = exports.uniqueId = exports.shortId = exports.uuid = exports.isEmptyObject = exports.isEmptyArray = exports.isEmpty = exports.isSet = exports.isMap = exports.isRegExp = exports.isDate = exports.isFunction = exports.isObject = exports.isArray = void 0;
|
|
35
35
|
// 类型导出
|
|
36
36
|
__exportStar(require("./types"), exports);
|
|
37
37
|
// 功能模块导出
|
|
@@ -46,6 +46,7 @@ exports.date = __importStar(require("./date"));
|
|
|
46
46
|
exports.async = __importStar(require("./async"));
|
|
47
47
|
exports.url = __importStar(require("./url"));
|
|
48
48
|
exports.validate = __importStar(require("./validate"));
|
|
49
|
+
exports.dom = __importStar(require("./generDom"));
|
|
49
50
|
// 直接导出常用函数
|
|
50
51
|
var array_1 = require("./array");
|
|
51
52
|
// 数组
|
|
@@ -169,3 +170,6 @@ Object.defineProperty(exports, "isEmptyObject", { enumerable: true, get: functio
|
|
|
169
170
|
Object.defineProperty(exports, "uuid", { enumerable: true, get: function () { return utility_1.uuid; } });
|
|
170
171
|
Object.defineProperty(exports, "shortId", { enumerable: true, get: function () { return utility_1.shortId; } });
|
|
171
172
|
Object.defineProperty(exports, "uniqueId", { enumerable: true, get: function () { return utility_1.uniqueId; } });
|
|
173
|
+
var generDom_1 = require("./generDom");
|
|
174
|
+
// DOM 工具
|
|
175
|
+
Object.defineProperty(exports, "message", { enumerable: true, get: function () { return generDom_1.message; } });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jz-toolkit",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"description": "一个轻量级的JavaScript/TypeScript 工具库",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -71,6 +71,11 @@
|
|
|
71
71
|
"require": "./dist/validate/index.js",
|
|
72
72
|
"import": "./dist/esm/validate/index.js",
|
|
73
73
|
"types": "./dist/validate/index.d.ts"
|
|
74
|
+
},
|
|
75
|
+
"./generDom": {
|
|
76
|
+
"require": "./dist/generDom/index.js",
|
|
77
|
+
"import": "./dist/esm/generDom/index.js",
|
|
78
|
+
"types": "./dist/generDom/index.d.ts"
|
|
74
79
|
}
|
|
75
80
|
},
|
|
76
81
|
"scripts": {
|