ph-utils 0.4.2 → 0.4.3
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/clipboard.d.ts +11 -0
- package/lib/clipboard.js +101 -0
- package/lib/index.d.ts +2 -2
- package/lib/index.js +4 -7
- package/package.json +1 -1
@@ -0,0 +1,11 @@
|
|
1
|
+
/**
|
2
|
+
* 复制数据, 可以从多种类型的数据
|
3
|
+
* 1. 直接复制文本: await copy("待复制的文本")
|
4
|
+
* 2. 复制节点上的 data-copy-text:
|
5
|
+
* <button data-copy-text="这是待复制的文本">复制</button>
|
6
|
+
* await copy(e.target) // or await copy("#a") or await copy(document.querySelector('#a'))
|
7
|
+
* 3. 直接复制节点本身数据: await copy('#a')
|
8
|
+
* @param {string | HTMLElement} source 复制源, 从中解析待复制的数据
|
9
|
+
* @returns {Promise<boolean>} 是否复制成功
|
10
|
+
*/
|
11
|
+
export declare function copy(source: string | HTMLElement): Promise<boolean>;
|
package/lib/clipboard.js
ADDED
@@ -0,0 +1,101 @@
|
|
1
|
+
/**
|
2
|
+
* 创建一个临时节点缓存待复制数据
|
3
|
+
* @param {String} value - 待复制文本
|
4
|
+
* @return {HTMLElement}
|
5
|
+
*/
|
6
|
+
function createFakeElement(value) {
|
7
|
+
const fakeElement = document.createElement("textarea");
|
8
|
+
fakeElement.style.border = "0";
|
9
|
+
fakeElement.style.padding = "0";
|
10
|
+
fakeElement.style.margin = "0";
|
11
|
+
fakeElement.style.position = "absolute";
|
12
|
+
fakeElement.style.left = "-9999px";
|
13
|
+
fakeElement.style.top = "-9999";
|
14
|
+
fakeElement.setAttribute("readonly", "");
|
15
|
+
fakeElement.value = value;
|
16
|
+
return fakeElement;
|
17
|
+
}
|
18
|
+
/** 通过执行 execCommand 来执行复制 */
|
19
|
+
function copyFromCommand(text) {
|
20
|
+
// 添加节点
|
21
|
+
const fakeEl = createFakeElement(text);
|
22
|
+
document.body.append(fakeEl);
|
23
|
+
fakeEl.focus();
|
24
|
+
fakeEl.select();
|
25
|
+
// 执行复制
|
26
|
+
const res = document.execCommand("copy");
|
27
|
+
fakeEl.remove(); // 删除节点
|
28
|
+
return Promise.resolve(res);
|
29
|
+
}
|
30
|
+
/** 使用 navigator.clipboard 复制 */
|
31
|
+
function copyFromClipboard(text) {
|
32
|
+
const theClipboard = navigator.clipboard;
|
33
|
+
if (theClipboard != null) {
|
34
|
+
return theClipboard
|
35
|
+
.writeText(text)
|
36
|
+
.then(() => {
|
37
|
+
Promise.resolve(true);
|
38
|
+
})
|
39
|
+
.catch(() => Promise.resolve(false));
|
40
|
+
}
|
41
|
+
return Promise.resolve(false);
|
42
|
+
}
|
43
|
+
/** 解析待复制的文本 */
|
44
|
+
function parseCopyText(source) {
|
45
|
+
let copyText = null; // 待复制文本
|
46
|
+
let sourceEl = null;
|
47
|
+
// 获取待复制数据
|
48
|
+
if (typeof source === "string") {
|
49
|
+
// 从节点拿数据
|
50
|
+
if (source.startsWith("#") || source.startsWith(".")) {
|
51
|
+
sourceEl = document.querySelector(source);
|
52
|
+
if (sourceEl == null) {
|
53
|
+
copyText = source;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
else {
|
57
|
+
copyText = source;
|
58
|
+
}
|
59
|
+
}
|
60
|
+
if (source instanceof HTMLElement) {
|
61
|
+
sourceEl = source;
|
62
|
+
}
|
63
|
+
// 从节点获取待复制数据
|
64
|
+
if (sourceEl != null) {
|
65
|
+
if (sourceEl.hasAttribute("data-copy-text")) {
|
66
|
+
copyText = sourceEl.getAttribute("data-copy-text");
|
67
|
+
}
|
68
|
+
else {
|
69
|
+
const tagName = sourceEl.tagName;
|
70
|
+
if (tagName === "INPUT" || tagName === "TEXTAREA") {
|
71
|
+
copyText = sourceEl.value;
|
72
|
+
}
|
73
|
+
else {
|
74
|
+
copyText = sourceEl.textContent;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
}
|
78
|
+
return copyText;
|
79
|
+
}
|
80
|
+
/**
|
81
|
+
* 复制数据, 可以从多种类型的数据
|
82
|
+
* 1. 直接复制文本: await copy("待复制的文本")
|
83
|
+
* 2. 复制节点上的 data-copy-text:
|
84
|
+
* <button data-copy-text="这是待复制的文本">复制</button>
|
85
|
+
* await copy(e.target) // or await copy("#a") or await copy(document.querySelector('#a'))
|
86
|
+
* 3. 直接复制节点本身数据: await copy('#a')
|
87
|
+
* @param {string | HTMLElement} source 复制源, 从中解析待复制的数据
|
88
|
+
* @returns {Promise<boolean>} 是否复制成功
|
89
|
+
*/
|
90
|
+
export async function copy(source) {
|
91
|
+
// 待复制文本
|
92
|
+
const copyText = parseCopyText(source);
|
93
|
+
if (copyText == null) {
|
94
|
+
return Promise.resolve(false);
|
95
|
+
}
|
96
|
+
const v = await copyFromClipboard(copyText);
|
97
|
+
if (v === false) {
|
98
|
+
return copyFromCommand(copyText);
|
99
|
+
}
|
100
|
+
return Promise.resolve(true);
|
101
|
+
}
|
package/lib/index.d.ts
CHANGED
@@ -81,8 +81,8 @@ export declare class BaseError extends Error {
|
|
81
81
|
*/
|
82
82
|
export declare function formatMoney(number: number): string;
|
83
83
|
/**
|
84
|
-
* 将风格由大写风格转换为下划线风格:
|
85
|
-
* @param name 命名, 例如:
|
84
|
+
* 将风格由大写风格转换为下划线风格: HelloWorld -> hello-world
|
85
|
+
* @param name 命名, 例如: HelloWorld
|
86
86
|
* @param connector 连接符, 默认为: _
|
87
87
|
*/
|
88
88
|
export declare function snakeCaseStyle(name: string, connector?: string): string;
|
package/lib/index.js
CHANGED
@@ -143,13 +143,10 @@ export function formatMoney(number) {
|
|
143
143
|
}
|
144
144
|
}
|
145
145
|
/**
|
146
|
-
* 将风格由大写风格转换为下划线风格:
|
147
|
-
* @param name 命名, 例如:
|
146
|
+
* 将风格由大写风格转换为下划线风格: HelloWorld -> hello-world
|
147
|
+
* @param name 命名, 例如: HelloWorld
|
148
148
|
* @param connector 连接符, 默认为: _
|
149
149
|
*/
|
150
|
-
export function snakeCaseStyle(name, connector = "
|
151
|
-
|
152
|
-
return `${connector}${match.toLowerCase()}`;
|
153
|
-
});
|
154
|
-
return snakeName[0] === connector ? snakeName.substring(1) : snakeName;
|
150
|
+
export function snakeCaseStyle(name, connector = "-") {
|
151
|
+
return name.replace(/([A-Z])/g, (match, p1, offset) => (offset > 0 ? connector : "") + match.toLowerCase());
|
155
152
|
}
|