vue 3 页面全屏显示

功能：

点击按钮“全屏显示”，页面全屏；再次点击，退出全屏。

一个 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 发布于 博客园