@jnrs/shared 1.0.13 → 1.0.14
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/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/utils/fullscreen.d.ts +40 -0
- package/dist/utils/fullscreen.js +76 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @Author : TanRui
|
|
3
|
+
* @WeChat : Tan578853789
|
|
4
|
+
* @File : fullscreen.ts
|
|
5
|
+
* @Date : 2025/10/09
|
|
6
|
+
* @Desc. : 全屏功能类封装（支持默认全屏整个页面）
|
|
7
|
+
*/
|
|
8
|
+
export declare class Fullscreen {
|
|
9
|
+
private defaultElement;
|
|
10
|
+
constructor(defaultElement?: HTMLElement);
|
|
11
|
+
/**
|
|
12
|
+
* 进入全屏
|
|
13
|
+
* @param element 可选，指定要全屏的元素
|
|
14
|
+
*/
|
|
15
|
+
request(element?: HTMLElement): Promise<void>;
|
|
16
|
+
/**
|
|
17
|
+
* 退出全屏
|
|
18
|
+
*/
|
|
19
|
+
exit(): Promise<void>;
|
|
20
|
+
/**
|
|
21
|
+
* 切换全屏状态
|
|
22
|
+
* @param element 可选，指定要切换全屏的元素
|
|
23
|
+
*/
|
|
24
|
+
toggle(element?: HTMLElement): Promise<void>;
|
|
25
|
+
/**
|
|
26
|
+
* 判断当前是否处于全屏状态
|
|
27
|
+
* @returns boolean
|
|
28
|
+
*/
|
|
29
|
+
isFullscreen(): boolean;
|
|
30
|
+
/**
|
|
31
|
+
* 设置默认全屏元素
|
|
32
|
+
* @param element 新的默认元素
|
|
33
|
+
*/
|
|
34
|
+
setDefaultElement(element: HTMLElement): void;
|
|
35
|
+
/**
|
|
36
|
+
* 获取当前全屏的元素（如果存在）
|
|
37
|
+
* @returns HTMLElement | null
|
|
38
|
+
*/
|
|
39
|
+
getFullscreenElement(): HTMLElement | null;
|
|
40
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @Author : TanRui
|
|
3
|
+
* @WeChat : Tan578853789
|
|
4
|
+
* @File : fullscreen.ts
|
|
5
|
+
* @Date : 2025/10/09
|
|
6
|
+
* @Desc. : 全屏功能类封装（支持默认全屏整个页面）
|
|
7
|
+
*/
|
|
8
|
+
export class Fullscreen {
|
|
9
|
+
// 默认全屏元素，可配置
|
|
10
|
+
defaultElement;
|
|
11
|
+
constructor(defaultElement) {
|
|
12
|
+
// 如果未传入，默认为 document.documentElement（即 <html>）
|
|
13
|
+
this.defaultElement = defaultElement || document.documentElement;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* 进入全屏
|
|
17
|
+
* @param element 可选，指定要全屏的元素
|
|
18
|
+
*/
|
|
19
|
+
async request(element) {
|
|
20
|
+
const target = element || this.defaultElement;
|
|
21
|
+
try {
|
|
22
|
+
await target.requestFullscreen({
|
|
23
|
+
navigationUI: 'hide'
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
catch (error) {
|
|
27
|
+
console.error('进入全屏失败:', error);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* 退出全屏
|
|
32
|
+
*/
|
|
33
|
+
async exit() {
|
|
34
|
+
if (document.fullscreenElement) {
|
|
35
|
+
try {
|
|
36
|
+
await document.exitFullscreen();
|
|
37
|
+
}
|
|
38
|
+
catch (error) {
|
|
39
|
+
console.error('退出全屏失败:', error);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* 切换全屏状态
|
|
45
|
+
* @param element 可选，指定要切换全屏的元素
|
|
46
|
+
*/
|
|
47
|
+
async toggle(element) {
|
|
48
|
+
if (document.fullscreenElement) {
|
|
49
|
+
await this.exit();
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
await this.request(element);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* 判断当前是否处于全屏状态
|
|
57
|
+
* @returns boolean
|
|
58
|
+
*/
|
|
59
|
+
isFullscreen() {
|
|
60
|
+
return !!document.fullscreenElement;
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* 设置默认全屏元素
|
|
64
|
+
* @param element 新的默认元素
|
|
65
|
+
*/
|
|
66
|
+
setDefaultElement(element) {
|
|
67
|
+
this.defaultElement = element;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* 获取当前全屏的元素（如果存在）
|
|
71
|
+
* @returns HTMLElement | null
|
|
72
|
+
*/
|
|
73
|
+
getFullscreenElement() {
|
|
74
|
+
return document.fullscreenElement;
|
|
75
|
+
}
|
|
76
|
+
}
|