功能：
点击按钮“全屏显示”，页面全屏；再次点击，退出全屏。
一个 toggle 功能。
toggle：v. 切换 n. 棒形纽扣; 套索扣; 转换键; 切换键
<script setup>
import { ref, reactive, watch, onBeforeMount, onMounted, onUnmounted } from 'vue'// 全屏显示const isFullScreen = ref(false);function toggleFullScreen() {if (!document.fullscreenElement) {document.documentElement.requestFullscreen()isFullScreen.value = true} else {document.exitFullscreen()isFullScreen.value = false}
}const handleFullScreenChange = () => {isFullScreen.value = !document.fullscreenElement
}onBeforeMount(() => {document.addEventListener('fullscreenchange', handleFullScreenChange)document.addEventListener('webkitfullscreenchange', handleFullScreenChange)
})onUnmounted(() => {document.removeEventListener('fullscreenchange', handleFullScreenChange)document.removeEventListener('webkitfullscreenchange', handleFullScreenChange)
})</script>// <el-button type="success" size="small" @click="toggleFullScreen()">全屏显示</el-button>
另，
关闭窗口
很简单：
function closeWindow() {window.close()
}
---END---
ben 发布于 博客园
ben 发布于 博客园
