vue 3 頁面全屏顯示

快乐的总统95發表於2024-09-15
Vue

功能：

點選按鈕“全屏顯示”，頁面全屏；再次點選，退出全屏。

一個 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 釋出於 部落格園

相關文章