diff --git a/index.html b/index.html
index 73751df..9a8fc0c 100644
--- a/index.html
+++ b/index.html
@@ -222,6 +222,7 @@
+
diff --git a/src/assets/images/exit-fullscreen.svg b/src/assets/images/exit-fullscreen.svg
new file mode 100644
index 0000000..7999e25
--- /dev/null
+++ b/src/assets/images/exit-fullscreen.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/images/request-fullscreen.svg b/src/assets/images/request-fullscreen.svg
new file mode 100644
index 0000000..cf47c4a
--- /dev/null
+++ b/src/assets/images/request-fullscreen.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index a80c0a6..dcd906e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -608,7 +608,7 @@ window.onload = function () {
instance.command.executePrint()
}
- // 6. 页面模式 | 纸张缩放
+ // 6. 页面模式 | 纸张缩放 | 全屏
const pageModeDom = document.querySelector('.page-mode')!
const pageModeOptionsDom = pageModeDom.querySelector('.options')!
pageModeDom.onclick = function () {
@@ -634,6 +634,27 @@ window.onload = function () {
instance.command.executePageScaleAdd()
}
+ // 全屏
+ const fullscreenDom = document.querySelector('.fullscreen')!
+ fullscreenDom.onclick = toggleFullscreen
+ window.addEventListener('keydown', (evt) => {
+ if (evt.key === 'F11') {
+ toggleFullscreen()
+ evt.preventDefault()
+ }
+ })
+ document.addEventListener('fullscreenchange', () => {
+ fullscreenDom.classList.toggle('exist')
+ })
+ function toggleFullscreen() {
+ console.log('fullscreen')
+ if (!document.fullscreenElement) {
+ document.documentElement.requestFullscreen()
+ } else {
+ document.exitFullscreen()
+ }
+ }
+
// 7. 编辑器使用模式
let modeIndex = 0
const modeList = [{
diff --git a/src/style.css b/src/style.css
index 6a85fc9..115d386 100644
--- a/src/style.css
+++ b/src/style.css
@@ -662,6 +662,14 @@ ul {
user-select: none;
}
+.footer .fullscreen {
+ background-image: url('./assets/images/request-fullscreen.svg');
+}
+
+.footer .fullscreen.exist {
+ background-image: url('./assets/images/exit-fullscreen.svg');
+}
+
.footer .editor-mode {
cursor: pointer;
user-select: none;